@charset "UTF-8";

/* Uses some reset rules from: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* https://css-tricks.com/revisiting-prefers-reduced-motion/ */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body.no-js .js-only {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/*
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
https://www.tpgi.com/the-anatomy-of-visually-hidden/
*/
.visually-hidden:not(:focus, :active) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
  text-size-adjust: none;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a:not([class]) {
  color: currentcolor;
  text-decoration-skip-ink: auto;
}

img,
picture {
  /* Auto block size retains aspect ratio on images with width and height attributes */
  block-size: auto;
  display: block;
  max-inline-size: 100%;
}

svg {
  /* Do not remove `inline-size: 100%;` or it will collapse SVGs on Safari! */
  inline-size: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

:target {
  scroll-margin-block: 5ex;
}

/* Project-specific styles: */

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Serif"),
    url("/static/fonts/roboto-serif/RobotoSerif-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto Serif"),
    url("/static/fonts/roboto-serif/RobotoSerif-Bold.ttf") format("truetype");
}

:root {
  --brand-orange: #ff5500;

  --error-color: #f00;
  --success-color: #0f0;

  --body-text-color: #000;
  --light-text-color: #a1a1a1;

  --layout-gap: 3rem;
  --element-gap: 2rem;

  --outline-max-width: 87.5rem;
  --outline-min-h-padding: 1.5rem;
  --outline-max-h-padding: 6.25rem;

  --section-border-height: 0.125rem;
  --section-border-color: #000;

  --banner-col-gap-min: 1.5rem;
  --banner-col-gap-max: 3.5rem;
  --banner-transition-time: 0.3s;

  /* --nav-* variables apply to hamburger menu and footer */
  --nav-bg-color: var(--brand-orange);
  --nav-text-color: #fff;

  --soft-bg-color: #f7f7f7;
  --soft-border-color: #efefef;

  --cta-bg-color: #000;
  --cta-text-color: #fff;
  --cta-outline-offset: 0.25rem;
  --cta-transition-time: 0.2s;
  --cta-transition-props: background-color, border-color, color;
  --cta-transition-func: ease-in-out;
}

body {
  color: var(--body-text-color);
  font-family: "Roboto Serif", serif;
  font-size: 1rem;
  line-height: 1.875;
  margin: 0;
  padding: 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
  body {
    scroll-behavior: smooth;
  }
}

.skip-link {
  background-color: white;
  font-size: 1rem;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 0.25em 0.75em;
  position: fixed;
  z-index: 1;
}

/* Note: `* + *` is called the "Lobotomized owl selector" */
:where(main section, .usp, .blog-article) > *:not(.visually-hidden) + * {
  margin-block-start: var(--element-gap);
}

section > *:first-child {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  overflow: hidden;
  text-wrap: balance;
  word-break: break-word;
}

h1 {
  font-size: clamp(3.5rem, 8vw, 6.25rem);
  margin-block-end: 4rem;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-block-end: 3rem;
}

h3 {
  font-size: 1.75rem;
  margin-block-end: 1.5rem;
}

section {
  position: relative;
}

p,
ul,
ol,
pre {
  margin: 0;
}

ul,
ol {
  padding-inline-start: 1.5em;
}

main :where(ul, ol):not([class]) > li + li {
  margin-block-start: calc(var(--element-gap) / 2);
}

main :where(ul, ol):not([class]) > li > :where(ul, ol) {
  margin-block-start: calc(var(--element-gap) / 4);
}

pre {
  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--soft-border-color);
  overflow-x: auto;
  padding: 1rem;
  resize: both;
}

:not(pre) > code,
p > a {
  word-wrap: break-word;
}

i {
  font-style: normal;
}

a {
  color: currentColor;
}

:is(a.cta, form button[type="submit"]) {
  --bg-color: var(--cta-bg-color);
  --text-color: var(--cta-text-color);
  --border-color: transparent;

  background-color: var(--bg-color);
  border: 0.125rem solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  display: inline-block;
  outline-offset: var(--cta-outline-offset);
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  transition-duration: var(--cta-transition-time);
  transition-property: var(--cta-transition-props);
  transition-timing-function: var(--cta-transition-func);
}

:is(a.cta, form button[type="submit"]):is(:hover, :active, :focus-visible) {
  --bg-color: var(--cta-text-color);
  --text-color: var(--cta-bg-color);
  --border-color: currentColor;
}

.intro-cta {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--element-gap);
}

.intro-cta .cta {
  text-align: center;
}

.intro-cta__group {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
}

.intro-cta__note {
  color: var(--light-text-color);
  font-size: 0.9rem;
  margin: 0;
  max-inline-size: 32ch;
}

@media (min-width: 48rem) {
  .intro-cta__note {
    max-inline-size: none;
    white-space: nowrap;
  }
}

a.cta.cta--secondary {
  --bg-color: transparent;
  --text-color: var(--cta-bg-color);
  --border-color: currentColor;
}

a.cta.cta--secondary:is(:hover, :active, :focus-visible) {
  --bg-color: var(--cta-bg-color);
  --text-color: var(--cta-text-color);
  --border-color: var(--cta-bg-color);
}

a.cta.cta--link {
  --bg-color: transparent;
  --text-color: currentColor;
  --border-color: transparent;

  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a.cta.cta--link:is(:hover, :active, :focus-visible) {
  --bg-color: transparent;
  --text-color: currentColor;
  --border-color: transparent;
  text-decoration: none;
}

:not(p) + p.cta-wrapper {
  margin-block-start: var(--layout-gap);
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

form label {
  display: block;
  margin-block-end: 0.5rem;
}

form :is(input:not([type="checkbox"], [type="radio"]), textarea) {
  --border-color: var(--soft-border-color);

  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--border-color);
  inline-size: 100%;
  padding: 1rem;
}

form
  :is(
    input:not([type="checkbox"], [type="radio"]),
    textarea
  )[aria-invalid="true"] {
  --border-color: var(--error-color);
}

form button[type="submit"] {
  padding-inline: 3.25rem;
}

form .form-status:empty,
form .hidden-inputs {
  /* Content display is needed to prevent row-gap for these elements */
  display: contents;
}

form .form-status {
  --border-color: currentColor;

  border: 0.0625rem dotted var(--border-color);
  padding: 1rem;
}

form .form-status:has(p.error-message) {
  --border-color: var(--error-color);
}

form .form-status:has(p.success-message) {
  --border-color: var(--success-color);
}

form .form-status > *:nth-child(2) {
  margin-block-start: 1.5rem;
}

form .form-status,
form .input-row {
  inline-size: 64ch;
  max-inline-size: 100%;
}

form .form-helper {
  color: var(--light-text-color);
  font-size: 0.9rem;
}

form .form-helper {
  margin-block-start: 0.5rem;
}

form .form-privacy {
  margin: 0;
}

.page-outline {
  display: grid;
  grid-template-areas:
    "site-banner"
    "site-main"
    "site-footer";
  row-gap: var(--layout-gap);
}

.site-banner,
.site-content,
.site-footer {
  padding-inline: clamp(
    var(--outline-min-h-padding),
    3vw,
    var(--outline-max-h-padding)
  );
  position: relative;
}

.container--outline {
  inline-size: 100%;
  margin: 0 auto;
  max-inline-size: var(--outline-max-width);
}

.container--site-banner,
.container--content > section:not(:last-of-type) {
  border-block-end: var(--section-border-height) solid
    var(--section-border-color);
}

.nav-toggle,
.nav-icon-wrapper {
  display: none;
}

.nav-icon-wrapper {
  align-items: center;
  aspect-ratio: 8 / 5;
  block-size: 0.75em;
  justify-content: center;
  transform: translateY(-0.25rem);
}

.nav-icon {
  block-size: 100%;
  inline-size: 100%;
  position: relative;
  text-indent: -9999px;
  text-shadow: 0 0 0 gray;
}

.nav-icon__line {
  background-color: currentColor;
  block-size: 0.125rem;
  display: block;
  inline-size: 100%;
  inset-inline-start: 0;
  position: absolute;
  text-indent: 0;
  transition-duration: var(--banner-transition-time);
  transition-property: background-color, inset-block-start, opacity, transform;
  transition-timing-function: cubic-bezier(0.325, 1, 0.22, 1);
}

.nav-icon__line:nth-child(1) {
  inset-block-start: 0;
}

.nav-icon__line:nth-child(2) {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.nav-icon__line:nth-child(3) {
  inset-block-end: 0;
}

.site-banner {
  grid-area: site-banner;
  transition: all var(--banner-transition-time) cubic-bezier(0.325, 1, 0.22, 1);
  white-space: nowrap;
}

.site-banner a {
  text-decoration: none;
}

.container--site-banner {
  column-gap: var(--banner-col-gap-min);
  display: grid;
  grid-auto-columns: 0;
  grid-auto-rows: 0;
  padding-block: 1.5rem;
}

.site-header {
  font-size: clamp(1rem, 7vw, 1.5rem);
  grid-area: site-header;
}

.site-nav {
  font-size: clamp(1rem, 7vw, 1.25rem);
  grid-area: site-nav;
}

.site-nav > ul {
  column-gap: clamp(var(--banner-col-gap-min), 3vw, var(--banner-col-gap-max));
  list-style-type: "";
  padding: 0;
}

.site-banner--landing .container--site-banner-landing {
  align-items: center;
  grid-template-areas:
    "site-header"
    "site-nav";
  grid-template-columns: 1fr;
  row-gap: 1rem;
}

.site-banner--landing .site-nav {
  justify-self: start;
}

.site-banner--landing .site-nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-content {
  grid-area: site-main;
}

.container--content {
  container-name: site-content;
  container-type: inline-size;
}

.container--content > .page-title {
  margin-block-start: 0;
}

.is-magnetic-target {
  transform: rotate(0deg);
  transform-origin: var(--magnetic-origin-x, 50%) var(--magnetic-origin-y, 50%);
  transition: transform var(--magnetic-duration, 0.35s)
    var(--magnetic-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: transform;
}

.layout--home .home-logo {
  display: block;
  inline-size: 100%;
  position: relative;
}

.layout--home .home-logo__wordmark {
  block-size: auto;
  display: block;
  inline-size: 100%;
}

.layout--home .home-logo__compass {
  block-size: var(--compass-size-y, 44.64%);
  display: block;
  inline-size: var(--compass-size-x, 9.08%);
  inset-block-start: calc(
    var(--compass-center-y, 50%) - (var(--compass-size-y, 44.64%) * 0.5)
  );
  inset-inline-start: calc(
    var(--compass-center-x, 50%) - (var(--compass-size-x, 9.08%) * 0.5)
  );
  position: absolute;
}

.layout--home .home-logo__compass-image {
  block-size: 100%;
  inline-size: 100%;
}

.layout--home .home-logo__compass-spin {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  transform-origin: 50% 50%;
}

.layout--home .home-logo.is-spinning .home-logo__compass-spin {
  animation: compass-spin var(--spin-duration, 1.1s)
    var(--spin-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (hover: hover) and (pointer: fine) {
  .layout--home .home-logo {
    cursor: pointer;
  }
}

.container--content > section {
  padding: var(--layout-gap) 0;
}

.container--content > .intro {
  font-size: clamp(1rem, 4vw, 1.25rem);
  padding-block-start: 0;
}

.site-footer {
  background-color: var(--nav-bg-color);
  background-image: url("/static/images/footer-logo.svg");
  background-position: bottom var(--layout-gap) center;
  background-repeat: no-repeat;
  background-size: 1524px 398px;
  color: var(--nav-text-color);
  grid-area: site-footer;
  padding-block: var(--layout-gap);
}

/* Adjust the position of the footer image once screen is smaller than the image itself */
@media screen and (width < 1524px) {
  .site-footer {
    background-position: bottom var(--layout-gap) left 15%;
  }
}

.container--footer {
  /* Image height is 25rem; spacing should clamp between 3rem and 15rem */
  padding-block-end: clamp(28rem, 80vw, 40rem);
}

.container--footer > .column-wrapper {
  column-gap: var(--banner-col-gap-max);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--element-gap);
}

.footer__nav {
  flex: 2 1 32rem;
  min-width: 16rem;
}

.footer__contact {
  flex: 1 1 16rem;
  min-width: 14rem;
  overflow-wrap: anywhere;
}

.footer__nav-links,
.footer__nav-group,
.footer__nav-sublist,
.footer__contact-links,
.footer__legal-links {
  list-style-type: "";
  margin: 0;
  padding: 0;
}

.footer__nav-links {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.footer__nav-group {
  margin: 0;
  padding: 0;
}

.footer__nav-sublist {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.footer__contact-links,
.footer__legal-links {
  display: grid;
  gap: 0.35rem;
}

.footer__contact-links {
  margin-block-end: 1.5rem;
}

.layout--home .jorijn-avatar {
  inline-size: max-content;
  margin-block: 4rem;
  margin-inline: auto;
}

.layout--home .jorijn-avatar__image {
  display: inline-block;
  position: relative;
}

.layout--home .jorijn-avatar__base {
  block-size: auto;
  display: block;
}

.layout--home .jorijn-avatar__eyes {
  block-size: 100%;
  inset: 0;
  inline-size: 100%;
  pointer-events: none;
  position: absolute;
  transform: translate(0, 0);
  transition: transform var(--eye-duration, 0.2s)
    var(--eye-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: transform;
}

.intro-scroll-wrapper {
  inset-block-end: 0.25rem;
  inset-inline-end: 0.75rem;
  position: absolute;
}

.intro-scroll {
  align-items: center;
  column-gap: 0.75rem;
  display: inline-flex;
  text-decoration: none;
}

.intro-scroll img {
  inline-size: 0.85em;
  transform: translateY(-2px);
}

.services__usps .usp-wrapper {
  display: grid;
  padding: 0;
  row-gap: clamp(var(--layout-gap), 8vw, 7.5rem);
}

.services__usps .usp {
  display: flex;
  flex-direction: column;
}

.services__usps .usp h3 + p {
  margin-block-start: 0;
}

.services__usps .usp p:not(.cta-wrapper) {
  max-inline-size: 48ch;
}

.services__usps .usp .cta-wrapper {
  margin-block-start: auto;
  padding-block-start: var(--element-gap);
}

.services__usps .usp .cta-wrapper--secondary {
  margin-block-start: 0.75rem;
  padding-block-start: 0;
}

.section--sitescan-deliverables ul {
  display: grid;
  gap: 1rem;
  list-style: "";
  margin: 0;
  padding: 0;
}

.section--sitescan-deliverables li {
  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--soft-border-color);
  max-inline-size: 70ch;
  padding: 1.25rem 1.5rem;
}

.section--sitescan-preview .sitescan-preview__grid {
  display: grid;
  gap: var(--element-gap);
  margin-block-start: var(--element-gap);
}

.section--sitescan-preview .sitescan-preview__grid--desktop {
  display: none;
}

.section--sitescan-preview .sitescan-preview__grid--more {
  margin-block-start: 1rem;
}

.section--sitescan-preview figure {
  margin: 0;
}

.section--sitescan-preview img {
  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--soft-border-color);
  block-size: auto;
  inline-size: 100%;
}

.section--sitescan-preview figcaption {
  color: var(--light-text-color);
  font-size: 0.9rem;
  margin-block-start: 0.5rem;
}

.section--sitescan-preview .sitescan-preview__more {
  margin-block-start: var(--element-gap);
}

.section--sitescan-preview .sitescan-preview__more summary {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.section--sitescan-preview .sitescan-preview__more summary:is(:hover, :focus-visible) {
  text-decoration: none;
}

.section--sitescan-preview .sitescan-preview__more:not([open]) .sitescan-preview__grid {
  display: none;
}

.section--sitescan-process ol {
  display: grid;
  gap: 1rem;
  max-inline-size: 70ch;
  padding-inline-start: 1.5rem;
}

@media (min-width: 60rem) {
  .section--sitescan-deliverables ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section--sitescan-preview .sitescan-preview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section--sitescan-preview .sitescan-preview__grid--primary,
  .section--sitescan-preview .sitescan-preview__more {
    display: none;
  }

  .section--sitescan-preview .sitescan-preview__grid--desktop {
    display: grid;
  }
}

/* Hosting Features Section */
.hosting-features {
  display: grid;
  gap: var(--layout-gap);
  margin-block-start: var(--layout-gap);
}

.hosting-features__category {
  display: block;
}

.hosting-features__header {
  margin-block-end: 1rem;
}

.hosting-features__icon {
  display: none;
}

.hosting-features__header :is(h3, h4) {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.hosting-features__list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}

.hosting-features__list li {
  display: grid;
  gap: 0.125rem;
}

.hosting-features__list li strong {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

.hosting-features__list li span {
  color: var(--light-text-color);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (prefers-contrast: no-preference) {
  .hosting-features__list li span {
    color: #666;
  }
}

/* Hosting Included Banner */
.hosting-included {
  background-color: var(--soft-bg-color);
  border-inline-start: 0.25rem solid var(--brand-orange);
  margin-block: var(--element-gap);
  padding: 1.25rem 1.5rem;
}

.hosting-included__label {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-block-end: 0.75rem;
  text-transform: uppercase;
}

.hosting-included__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
}

.hosting-included__list li {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.hosting-included__icon {
  block-size: 1rem;
  color: var(--brand-orange);
  flex-shrink: 0;
  inline-size: 1rem;
}

.hosting-pricing-note {
  color: var(--light-text-color);
  font-size: 0.9rem;
}

/* WordPress Package Cards */
.wordpress-packages__grid {
  display: grid;
  gap: var(--element-gap);
}

.package-card {
  border: 0.125rem solid var(--section-border-color);
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.package-card:hover {
  border-color: var(--light-text-color);
}

.package-card--recommended {
  border-color: var(--brand-orange);
  border-width: 0.1875rem;
}

.package-card--recommended:hover {
  border-color: var(--brand-orange);
  box-shadow: 0 0.5rem 2rem rgba(255, 85, 0, 0.1);
}

.package-card__badge {
  background-color: var(--brand-orange);
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  inset-block-start: 0;
  inset-inline-end: 1.5rem;
  letter-spacing: 0.05em;
  padding: 0.375rem 0.75rem;
  position: absolute;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.package-card__header {
  margin-block-end: 1rem;
}

.package-card__header h3 {
  font-size: 1.5rem;
  margin-block-end: 0.25rem;
}

.package-card__tagline {
  color: var(--light-text-color);
  font-size: 0.9rem;
  font-style: italic;
  margin-block-end: 0.5rem;
}

.package-card__price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.package-card__price-amount {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.package-card__price-note {
  color: var(--light-text-color);
  font-size: 0.875rem;
}

.package-card__specs {
  border-block: 0.0625rem solid var(--soft-border-color);
  display: flex;
  gap: 2rem;
  margin-block: 1rem;
  padding-block: 1rem;
}

.package-card__spec {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.package-card__spec-value {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.package-card__spec-label {
  color: var(--light-text-color);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.package-card__features {
  display: grid;
  flex-grow: 1;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.package-card__feature {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  gap: 0.625rem;
  line-height: 1.4;
}

.package-card__feature-icon {
  block-size: 1rem;
  color: currentColor;
  flex-shrink: 0;
  inline-size: 1rem;
}

.package-card__feature--included .package-card__feature-icon {
  color: var(--brand-orange);
}

.package-card__feature--excluded {
  color: var(--light-text-color);
}

.package-card__feature--excluded .package-card__feature-icon {
  color: inherit;
}

.package-card--recommended .package-card__feature--excluded {
  color: var(--light-text-color);
}

.package-card__feature--highlight {
  font-weight: 700;
}

.package-card__note {
  color: var(--light-text-color);
  font-size: 0.9rem;
  font-style: italic;
}

.package-card__cta {
  margin-block-start: auto;
  padding-block-start: 1.5rem;
}

.package-card__cta .cta-button {
  display: block;
  text-align: center;
}

.package-card--recommended .package-card__cta .cta-button {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

.package-card--recommended .package-card__cta .cta-button:hover,
.package-card--recommended .package-card__cta .cta-button:focus-visible {
  background-color: #fff;
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

.package-card--basic {
  background-color: var(--soft-bg-color);
  border-color: var(--soft-border-color);
}

.package-card--basic:hover {
  border-color: var(--light-text-color);
}

/* Email Packages Grid */
.email-packages__grid {
  display: grid;
  gap: var(--element-gap);
  max-inline-size: 24rem;
}

/* Email Extras Section */
.email-packages__extras {
  border-block-start: var(--section-border-height) solid var(--section-border-color);
  margin-block-start: var(--layout-gap);
  padding-block-start: var(--layout-gap);
}

.email-packages__extras h3 {
  font-size: 1.5rem;
  margin-block-end: 1rem;
}

.email-extras__list {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.email-extras__item {
  align-items: baseline;
  background-color: var(--soft-bg-color);
  display: grid;
  gap: 0.25rem 1rem;
  grid-template-areas:
    "label price"
    "note  note";
  grid-template-columns: 1fr auto;
  padding: 1rem 1.25rem;
}

.email-extras__label {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  grid-area: label;
}

.email-extras__price {
  color: var(--brand-orange);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  grid-area: price;
}

.email-extras__note {
  color: var(--light-text-color);
  font-size: 0.9rem;
  grid-area: note;
}

@container site-content (width >= 40rem) {
  .email-extras__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Alternative Package Section */
.wordpress-packages__alternative {
  align-items: start;
  border-block-start: var(--section-border-height) solid var(--section-border-color);
  display: grid;
  gap: var(--element-gap);
  margin-block-start: var(--layout-gap);
  padding-block-start: var(--layout-gap);
}

.wordpress-packages__alternative-content h3 {
  font-size: 1.5rem;
  margin-block-end: 0.75rem;
}

.wordpress-packages__alternative-content p {
  max-inline-size: 48ch;
}

.wordpress-packages__alternative .package-card--basic {
  max-inline-size: 24rem;
}

@container site-content (width >= 40rem) {
  .hosting-features {
    gap: var(--element-gap);
    grid-template-columns: repeat(2, 1fr);
  }

  .wordpress-packages__alternative {
    grid-template-columns: 1fr auto;
  }
}

@container site-content (width >= 60rem) {
  .services__usps .usp-wrapper {
    column-gap: 9.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .wordpress-packages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hosting-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container site-content (width >= 75rem) {
  .wordpress-packages__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hosting-features {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
}

/* ===========================================
   Consultancy Page Styles
   =========================================== */

/* Consultancy Focus - Three column layout for service areas */
.consultancy-focus {
  display: grid;
  gap: var(--layout-gap);
  margin-block-start: var(--element-gap);
}

@container site-content (width >= 60rem) {
  .consultancy-focus {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--element-gap);
  }
}

.article-previews {
  container-name: article-previews;
  container-type: inline-size;
  list-style-type: "";
  padding: 0;
}

.article-preview {
  border-block-end: 0.0625rem solid var(--section-border-color);
}

.article-preview:last-child {
  border-block-end: 0;
}

.article-preview__link {
  align-items: start;
  color: inherit;
  column-gap: 2.5rem;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-areas:
    "article-date   article-extra"
    "article-content article-content";
  grid-template-columns: max-content 1fr;
  padding-block: 2.5rem;
  row-gap: 1rem;
  text-decoration: none;
}

.article-preview__link:hover .article-preview__title {
  text-decoration: underline;
}

.article-preview__date {
  grid-area: article-date;
}

@media (prefers-contrast: no-preference) {
  .article-preview__date {
    color: var(--light-text-color);
  }
}

.article-preview__content {
  grid-area: article-content;
}

.article-preview__title {
  display: block;
  text-wrap: balance;
}

.article-preview__excerpt {
  color: var(--light-text-color);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-block: 0.5rem 0;
}

.article-preview__word-count {
  grid-area: article-extra;
  justify-self: end;
  background-color: var(--nav-bg-color);
  block-size: max-content;
  color: var(--nav-text-color);
  inline-size: max-content;
  padding: 0.25rem 0.75rem;
}

@container article-previews (width >= 42rem) {
  .article-preview__link {
    grid-template-areas: "article-date article-content article-extra";
    grid-template-columns: max-content 1fr max-content;
  }

  .article-preview__excerpt {
    margin-block-start: 0.75rem;
  }
}

/* KB article previews: no date column, content starts at left */
.section--kb-articles .article-preview__link {
  grid-template-areas: "article-content article-extra";
  grid-template-columns: 1fr max-content;
}

.customer-logo-wrapper {
  --logo-gap: 8.5rem;
  inline-size: 99svw;
  margin-inline-start: 50%;
  padding-inline: var(--outline-min-h-padding);
  transform: translate3d(-50%, 0, 0);
}

.customer-logos {
  align-items: center;
  column-gap: var(--logo-gap);
  display: flex;
  list-style-type: "";
  overflow-x: auto;
  padding: 1rem 0;
  padding-inline-end: var(--logo-gap);
}

.customer-logo-wrapper.is-marquee {
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.customer-logo-wrapper.is-marquee:hover {
  cursor: grab;
}

.customer-logo-wrapper.is-marquee.is-dragging {
  cursor: grabbing;
}

.customer-logo-wrapper.is-marquee .customer-logos {
  overflow: visible;
}

.customer-logos-track {
  align-items: center;
  display: flex;
  width: max-content;
  animation: customer-logos-marquee var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}

@keyframes customer-logos-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--marquee-width, 100%)), 0, 0);
  }
}

@keyframes compass-spin {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(380deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-logos-track {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

.customer-logo {
  max-inline-size: initial;
}

.customer-logo--logius {
  max-inline-size: 263px;
}

.customer-logo--nike {
  max-inline-size: 253px;
}

.customer-logo--politie {
  max-inline-size: 311px;
  transform: translateY(-8%);
}

.customer-logo--sanoma {
  max-inline-size: 381px;
}

.customer-logo--sbs {
  max-inline-size: 211px;
}

.customer-logo--schiphol {
  max-inline-size: 244px;
}

.customer-logo--uwv {
  max-inline-size: 151px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  justify-content: center;
  list-style-type: "";
  padding: 0;
}

.pagination-item {
  border: 0.0625rem solid transparent;
}

.pagination-item > * {
  display: inline-block;
  padding: 0.25rem 0.75rem;
}

.pagination-item > a {
  color: currentColor;
  outline-offset: var(--cta-outline-offset);
  text-decoration: none;
}

.pagination-item:not(.pagination-item--number) {
  color: var(--cta-text-color);
}

.pagination-item:not(.pagination-item--number) > span {
  background-color: var(--light-text-color);
}

.pagination-item:not(.pagination-item--number) > a {
  background-color: var(--cta-bg-color);
}

.pagination-item--number:has(a[aria-current]) {
  border-block-end-color: currentColor;
}

@media (prefers-contrast: no-preference) {
  .pagination-item--number > a:not([aria-current]) {
    color: var(--light-text-color);
  }
}

/* Smaller layout with hamburger menu */
@media (max-width: calc(65rem - 1px)) {
  .nav-icon-wrapper {
    display: flex;
  }

  .container--site-banner {
    grid-template-areas: "site-header";
    grid-template-rows: max-content;
  }

  .site-header {
    align-items: center;
    column-gap: var(--banner-col-gap-min);
    display: flex;
  }

  .site-banner:not(:has(.nav-toggle:checked)) .site-nav {
    max-block-size: 1px;
    overflow: hidden;
  }

  .site-banner:has(.nav-toggle:checked) {
    background-color: var(--nav-bg-color);
    color: var(--nav-text-color);
    inline-size: 100%;
    min-block-size: 100svh;
  }

  .site-banner:has(.nav-toggle:checked) .nav-icon__line:nth-child(1) {
    inset-block-start: 50%;
    transform: rotate(-45deg);
  }

  .site-banner:has(.nav-toggle:checked) .nav-icon__line:nth-child(2) {
    opacity: 0;
  }

  .site-banner:has(.nav-toggle:checked) .nav-icon__line:nth-child(3) {
    inset-block-start: 50%;
    transform: rotate(45deg);
  }

  .site-banner:has(.nav-toggle:checked) .container--site-banner {
    border-block-end: none;
    grid-template-areas:
      "site-header"
      "."
      "site-nav";
    grid-template-rows: max-content 1fr max-content;
    min-block-size: 100%;
    row-gap: 0.75rem;
  }

  .site-banner:has(.nav-toggle:checked) .container--site-banner > * {
    inline-size: calc(100svw - 2 * var(--outline-min-h-padding));
  }

  .site-banner:has(.nav-toggle:checked) .site-header {
    border-block-end: var(--section-border-height) solid currentColor;
    padding-block-end: 1.5rem;
  }

  .site-banner:has(.nav-toggle:checked) .site-nav {
    font-size: clamp(1rem, 7vw, 3rem);
    max-block-size: none;
  }

  .site-banner:has(.nav-toggle:checked) .site-nav > ul {
    display: flex;
    flex-direction: column;
  }
}

/* Wider layout without hamburger menu */
@media (min-width: 65rem) {
  .page-outline {
    row-gap: 7.5rem;
  }

  .container--site-banner {
    align-items: center;
    grid-template-areas: "site-header . site-nav";
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: max-content;
  }

  .site-nav > ul {
    display: flex;
  }

  .site-banner--landing .container--site-banner-landing {
    grid-template-areas: "site-header . site-nav";
    grid-template-columns: max-content 1fr max-content;
  }

  .site-banner--landing .site-nav {
    justify-self: end;
  }

  .container--content > section {
    padding-block: 7.5rem 5rem;
  }

  .layout--page .page-title,
  .container--content > section:not(.intro),
  .container--content > .intro > p:not(.intro-scroll-wrapper),
  .container--content > .intro > .jorijn-avatar {
    padding-inline: 12.5rem;
  }

  .layout--home .jorijn-avatar {
    margin-block: 5rem;
    margin-inline: auto;
  }

  .section--how-to-contact {
    column-gap: var(--banner-col-gap-max);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-inline: 0 !important;
  }

  .section--how-to-contact > * {
    flex: 1;
  }

  .section--how-to-contact :is(h2, section) {
    margin-block-start: 0;
  }

  .section--how-to-contact h3 {
    /* Increase line height to line up the vertical top of the H2 and H3 elements */
    line-height: 1.85;
  }
}

/* ---------------------------------------------------------
 * Work & Results Page - Case Studies
 * --------------------------------------------------------- */

.case-studies {
  display: grid;
  gap: var(--layout-gap);
}

.case-study {
  background-color: var(--soft-bg-color);
  border-inline-start: 0.25rem solid var(--brand-orange);
  padding: 1.5rem 2rem;
}

.case-study h3 {
  margin-block-end: 0.5rem;
}

.case-study__label {
  color: var(--light-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  margin-block-end: 1.25rem;
}

.case-study__details {
  display: grid;
  gap: 1rem;
}

.case-study__details dt {
  color: var(--body-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-block-end: 0.25rem;
  text-transform: uppercase;
}

.case-study__details dd {
  margin: 0;
}

/* ---------------------------------------------------------
 * Work & Results Page - Expertise Grid
 * --------------------------------------------------------- */

.expertise-grid {
  display: grid;
  gap: var(--layout-gap);
}

@media (min-width: 50rem) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.expertise-item h3 {
  margin-block-end: 0.75rem;
}

.expertise-item ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.expertise-item li + li {
  margin-block-start: 0.5rem;
}

/* ---------------------------------------------------------
 * Work & Results Page - Testimonials
 * --------------------------------------------------------- */

.testimonials {
  display: grid;
  gap: var(--layout-gap);
}

.testimonial {
  background-color: var(--soft-bg-color);
  margin: 0;
  padding: 1.5rem 2rem;
}

.testimonial p {
  font-style: italic;
  margin: 0 0 1rem;
}

.testimonial footer {
  color: var(--light-text-color);
  font-size: 0.875rem;
}

.testimonial cite {
  font-style: normal;
}

.testimonial-note {
  color: var(--light-text-color);
  margin-block-start: 1rem;
}

/* ---------------------------------------------------------
 * Contact Page - Process Steps
 * --------------------------------------------------------- */

.contact-process-steps {
  counter-reset: process-step;
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-process-steps li {
  display: grid;
  gap: 0.25rem;
}

.contact-process-steps strong::before {
  content: counter(process-step) ". ";
  counter-increment: process-step;
}

.contact-process-steps strong {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
}

.contact-process-steps span {
  color: var(--light-text-color);
}

@media (min-width: 50rem) {
  .contact-process-steps {
    align-items: start;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
  }
}

/* ---------------------------------------------------------
 * Contact Page - FAQ
 * --------------------------------------------------------- */

.contact-faq {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}

.contact-faq__item {
  background-color: var(--soft-bg-color);
  padding: 1.25rem 1.5rem;
}

.contact-faq__item dt {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.contact-faq__item dd {
  color: var(--light-text-color);
  margin: 0;
}

@media (min-width: 50rem) {
  .contact-faq {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------
 * Contact Page - Not Ready Section
 * --------------------------------------------------------- */

.section--contact-not-ready {
  border-inline-start: 0.25rem solid var(--brand-orange);
  padding-inline-start: 1.5rem;
}

.section--contact-not-ready h2 {
  font-size: 1.5rem;
  margin-block-end: 0.75rem;
}

.section--contact-not-ready p {
  color: var(--light-text-color);
  margin-block-end: 1.25rem;
}

.section--contact-not-ready__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.section--contact-not-ready__links .cta {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

/* ---------------------------------------------------------
 * Tables - Editorial Contrast Style
 * --------------------------------------------------------- */

table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  inline-size: 100%;
  line-height: 1.6;
}

thead {
  background-color: var(--cta-bg-color);
  color: var(--cta-text-color);
}

thead th {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1rem 1.25rem;
  text-align: start;
}

tbody tr {
  border-block-end: 1px solid var(--soft-border-color);
}

tbody tr:nth-child(odd) {
  background-color: var(--soft-bg-color);
}

tbody th,
tbody td {
  padding: 1rem 1.25rem;
  vertical-align: top;
}

tbody th {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Responsive: horizontal scroll wrapper for small screens */
@media (max-width: 40rem) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  thead th,
  tbody th,
  tbody td {
    min-inline-size: 10rem;
    padding: 0.875rem 1rem;
  }

  tbody th {
    min-inline-size: 8rem;
  }
}
/* =============================================
   KNOWLEDGE BASE STYLES
   For jorijn.com - Eleventy site
   Following the existing design system
   ============================================= */

/* =============================================
   BREADCRUMBS
   ============================================= */

.kb-breadcrumbs {
  margin-block-end: 2rem;
}

@media (min-width: 65rem) {
  .kb-breadcrumbs {
    padding-inline: 12.5rem;
  }
}

.kb-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

.kb-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kb-breadcrumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--light-text-color);
}

.kb-breadcrumbs__link {
  color: var(--body-text-color);
  text-decoration: none;
}

.kb-breadcrumbs__link:hover,
.kb-breadcrumbs__link:focus-visible {
  text-decoration: underline;
}

.kb-breadcrumbs__item--current {
  color: var(--light-text-color);
}


/* =============================================
   CATEGORY CARDS (KB Index Page)
   ============================================= */

.kb-categories {
  display: grid;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@container site-content (width >= 40rem) {
  .kb-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container site-content (width >= 60rem) {
  .kb-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kb-category-card {
  background-color: #fff;
  border: 0.0625rem solid var(--section-border-color);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  text-decoration: none;
  position: relative;
}

.kb-category-card:hover .kb-category-card__title,
.kb-category-card:focus-visible .kb-category-card__title {
  text-decoration: underline;
}

.kb-category-card:focus-visible {
  outline: 0.125rem solid var(--body-text-color);
  outline-offset: 0.125rem;
}

.kb-category-card__icon {
  align-items: center;
  background-color: var(--body-text-color);
  border-radius: 50%;
  color: #fff;
  display: flex;
  block-size: 3rem;
  inline-size: 3rem;
  justify-content: center;
  flex-shrink: 0;
  margin-block-end: 1.5rem;
}

.kb-category-card__icon svg {
  block-size: 1.5rem;
  inline-size: 1.5rem;
}

.kb-category-card__title {
  color: var(--body-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
}

.kb-category-card__description {
  color: var(--body-text-color);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.kb-category-card__stats {
  color: var(--light-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.kb-category-card__arrow {
  color: var(--body-text-color);
  position: absolute;
  inset-block-start: 2rem;
  inset-inline-end: 2rem;
  opacity: 0;
}

.kb-category-card:hover .kb-category-card__arrow,
.kb-category-card:focus-visible .kb-category-card__arrow {
  opacity: 1;
}

.kb-category-card__arrow svg {
  block-size: 1.25rem;
  inline-size: 1.25rem;
}


/* =============================================
   SUBCATEGORY LIST (Category Page)
   ============================================= */

.kb-subcategories {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-subcategory {
  border-block-end: 0.0625rem solid var(--section-border-color);
}

.kb-subcategory:first-child {
  border-block-start: 0.0625rem solid var(--section-border-color);
}

.kb-subcategory__link {
  display: grid;
  grid-template-areas:
    "title count"
    "description description";
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  padding-block: 2rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.kb-subcategory__link:hover,
.kb-subcategory__link:focus-visible {
  background-color: var(--soft-bg-color);
}

.kb-subcategory__link:focus-visible {
  outline: 0.125rem solid var(--brand-orange);
  outline-offset: -0.125rem;
}

@container site-content (width >= 42rem) {
  .kb-subcategory__link {
    grid-template-areas: "title description count";
    grid-template-columns: minmax(12rem, 1fr) 2fr auto;
    align-items: center;
  }
}

.kb-subcategory__title {
  grid-area: title;
  color: var(--body-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  transition: color 0.15s ease;
}

.kb-subcategory__link:hover .kb-subcategory__title {
  color: var(--brand-orange);
}

.kb-subcategory__description {
  grid-area: description;
  color: var(--body-text-color);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

@container site-content (width >= 42rem) {
  .kb-subcategory__description {
    color: var(--light-text-color);
  }
}

.kb-subcategory__count {
  grid-area: count;
  color: var(--light-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  white-space: nowrap;
}


/* =============================================
   ARTICLE PREVIEWS (Subcategory Page)
   ============================================= */

.kb-previews {
  list-style: none;
  margin: 0;
  padding: 0;
  container-name: kb-previews;
  container-type: inline-size;
}

.kb-preview {
  border-block-end: 0.0625rem solid var(--section-border-color);
  padding-block: 2rem;
}

.kb-preview:first-child {
  border-block-start: 0.0625rem solid var(--section-border-color);
}

.kb-preview__link {
  display: block;
  text-decoration: none;
}

.kb-preview__title {
  display: block;
  color: var(--body-text-color);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.kb-preview__link:hover .kb-preview__title,
.kb-preview__link:focus-visible .kb-preview__title {
  color: var(--brand-orange);
}

.kb-preview__excerpt {
  color: var(--light-text-color);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}


/* =============================================
   INFO/WARNING BOXES
   ============================================= */

.kb-info-box {
  background-color: var(--soft-bg-color);
  border-inline-start: 0.25rem solid var(--brand-orange);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
}

.kb-info-box--warning {
  border-color: #e65100;
  background-color: #fff3e0;
}

.kb-info-box__title {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  color: var(--brand-orange);
}

.kb-info-box--warning .kb-info-box__title {
  color: #e65100;
}

.kb-info-box p {
  margin: 0;
  font-size: 0.9rem;
}


/* =============================================
   SECTION SPACING
   ============================================= */

.section--kb-intro {
  padding-block-end: 5rem;
}

.section--kb-categories,
.section--kb-subcategories,
.section--kb-articles,
.section--kb-article-content {
  padding-block: 5rem;
}

@media (min-width: 65rem) {
  .section--kb-intro {
    padding-block-end: 7.5rem;
  }

  .section--kb-categories {
    padding-block: 7.5rem;
    padding-inline: 6rem;
  }

  .section--kb-subcategories,
  .section--kb-articles,
  .section--kb-article-content {
    padding-block: 7.5rem;
    padding-inline: 12.5rem;
  }
}


/* =============================================
   ARTICLE CONTENT SPECIFICS
   ============================================= */

.section--kb-article-content h2 {
  margin-block-start: 3rem;
  scroll-margin-block: 5ex;
}

.section--kb-article-content h2:first-child {
  margin-block-start: 0;
}

.section--kb-article-content h3 {
  margin-block-start: 2rem;
  scroll-margin-block: 5ex;
}

.section--kb-article-content pre {
  margin-block: 1.5rem;
}

.section--kb-article-content code:not(pre code) {
  background-color: var(--soft-bg-color);
  border: 0.0625rem solid var(--soft-border-color);
  font-size: 0.875em;
  padding: 0.125rem 0.375rem;
  border-radius: 0.125rem;
}