/*
 * Components from the Hund i bevegelse design system (v2.2).
 * Every value is a token from tokens.css or a Figma text style; nothing is
 * rounded. Interaction follows the design: hover = *-hover token, active =
 * *-active token and scale(var(--motion-press)), focus = Focus/Ring.
 */

/* Skip link */
.skip-link {
  position: absolute;
  top: var(--spacing-8);
  left: var(--spacing-8);
  z-index: 100;
  min-height: var(--layout-tap-target);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: var(--text-label-nav);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Tap Area (Figma 4105:251): links drawn smaller than the 44px minimum get an
   invisible 44px tap area without changing the layout */
.tap-target,
.link,
a.contact-row__label {
  position: relative;
}

.tap-target::after,
.button--small::after,
.link::after,
a.contact-row__label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--layout-tap-target));
  height: var(--layout-tap-target);
  transform: translate(-50%, -50%);
}

/* Icon */
.icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Button */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border: 0;
  border-radius: var(--radius-md);
  font: var(--text-label-button);
  letter-spacing: var(--text-label-button-tracking);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  transform: scale(var(--motion-press));
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.button .icon {
  width: 20px;
  height: 20px;
}

.button--small {
  position: relative;
  padding: var(--spacing-12) var(--spacing-16);
  font: var(--text-label-button-small);
  letter-spacing: var(--text-label-button-small-tracking);
}

.button--primary {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.button--primary:hover { background: var(--color-bg-inverse-hover); }
.button--primary:active { background: var(--color-bg-inverse-active); }

.button--outline {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}

.button--outline:hover { background: var(--color-bg-subtle-hover); }
.button--outline:active { background: var(--color-bg-subtle-active); }

.button--outline:focus-visible {
  background: var(--color-bg-subtle-hover);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong), var(--focus-ring);
}

/* Inverse buttons sit on the green background */
.button--inverse {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.button--inverse:hover { background: var(--color-bg-surface-hover); }
.button--inverse:active { background: var(--color-bg-surface-active); }
.button--inverse:focus-visible { box-shadow: var(--focus-ring-inverse); }

/* Link (Figma 4106:5454): Tone Default / Inverse / Inverse Subtle, Size Medium / Small */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  border-radius: var(--radius-sm);
  color: var(--color-text-accent);
  font: var(--text-label-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.link .icon {
  width: 20px;
  height: 20px;
}

.link:hover {
  color: var(--color-text-accent-hover);
  text-decoration: underline;
}

.link:active {
  color: var(--color-text-accent-active);
  text-decoration: underline;
}

.link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.link--small {
  gap: var(--spacing-4);
  font: var(--text-label-small);
}

.link--small .icon {
  width: 16px;
  height: 16px;
}

.link--inverse { color: var(--color-text-accent-inverse); }
.link--inverse:hover { color: var(--color-text-accent-inverse-hover); }
.link--inverse:active { color: var(--color-text-accent-inverse-active); }

.link--inverse-subtle { color: var(--color-text-inverse); }
.link--inverse-subtle:hover { color: var(--color-text-inverse-hover); }
.link--inverse-subtle:active { color: var(--color-text-accent-inverse-active); }

.link--inverse:focus-visible,
.link--inverse-subtle:focus-visible {
  outline-color: var(--color-border-focus-inverse);
}

/* Contact Row */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: 0;
  list-style: none;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font: var(--text-label-medium);
}

.contact-row .icon {
  width: 22px;
  height: 22px;
}

.contact-row--light { color: var(--color-text-primary); }
.contact-row--light .icon { color: var(--color-icon-accent); }
.contact-row--dark { color: var(--color-text-inverse); }
.contact-row--dark .icon { color: var(--color-icon-accent-inverse); }

a.contact-row__label:hover,
a.contact-row__label:active {
  text-decoration: underline;
}

.contact-row--light a.contact-row__label:active { color: var(--color-text-accent); }
.contact-row--dark a.contact-row__label:active { color: var(--color-text-accent-inverse); }

.contact-row--dark a.contact-row__label:focus-visible {
  outline-color: var(--color-border-focus-inverse);
}

/* Nav Item */
.nav-item {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-target);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  font: var(--text-label-nav);
  white-space: nowrap;
}

.nav-item:hover,
.nav-item--active {
  color: var(--color-text-on-accent);
  text-decoration: underline;
}

.nav-item--active {
  font-weight: 600;
}

.nav-item:focus-visible {
  outline: 2px solid var(--color-border-focus-inverse);
  outline-offset: 0;
}

/* Header */
.site-header {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding-block: var(--spacing-20);
}

/* The logo slot has the Figma size (270×72 / 210×56 / 150×40); the artwork
   fills 95.6% of it, as the tight SVG sits inside Figma's 500×133 logo frame */
.site-header__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 270px;
  height: 72px;
}

.site-header__logo img {
  width: 95.6%;
}

.site-header__logo:focus-visible {
  outline-color: var(--color-border-focus-inverse);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 0;
  list-style: none;
}

.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--layout-tap-target);
  height: var(--layout-tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-icon-inverse);
  cursor: pointer;
}

.menu-button:focus-visible {
  outline-color: var(--color-border-focus-inverse);
}

/* The header button needs about 1175px next to the logo and menu */
@media (max-width: 1199px) {
  .site-header__cta {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-header__inner {
    padding-block: var(--spacing-16);
  }

  .site-header__logo {
    width: 210px;
    height: 56px;
  }

  .site-nav__list {
    gap: 0;
  }
}

@media (max-width: 767px) {
  .site-header__inner {
    padding-block: var(--spacing-12);
  }

  .site-header__logo {
    width: 150px;
    height: 40px;
  }

  .has-dialog .site-nav {
    display: none;
  }

  .has-dialog .menu-button {
    display: inline-flex;
  }

  /* Without <dialog> support the nav stays visible and wraps */
  .site-header__inner {
    flex-wrap: wrap;
  }
}

/* Mobile menu (full-screen dialog, Figma Menu/Mobile) */
.mobile-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.mobile-menu[open] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: mobile-menu-in var(--duration-slow) var(--ease-entrance);
}

.mobile-menu::backdrop {
  background: var(--color-bg-inverse);
}

@keyframes mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--motion-rise)));
  }
}

.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-12) var(--spacing-24);
}

.mobile-menu__bar .site-header__logo {
  width: 150px;
  height: 40px;
}

.mobile-menu__bar .menu-button {
  display: inline-flex;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-32) var(--spacing-24);
  list-style: none;
}

.mobile-menu__nav .nav-item {
  width: 100%;
}

.mobile-menu__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: 0 var(--spacing-24) var(--spacing-48);
}

.mobile-menu__bottom .button {
  width: 100%;
}

/* Footer */
.site-footer {
  padding-block: var(--spacing-64) var(--spacing-40);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.site-footer__columns {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-64);
  margin-bottom: var(--spacing-48);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: 260px;
  font: var(--text-body-medium);
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.site-footer__title {
  color: var(--color-text-accent-inverse);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: 0;
  list-style: none;
}

.site-footer .contact-list {
  gap: var(--spacing-12);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border-inverse);
  opacity: 0.8;
}

@media (max-width: 767px) {
  .site-footer__columns {
    flex-direction: column;
    gap: var(--spacing-40);
  }
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font: var(--text-eyebrow-small);
  letter-spacing: var(--text-eyebrow-small-tracking);
  text-transform: uppercase;
}

.badge .icon {
  width: 20px;
  height: 20px;
}

.badge--light { color: var(--color-text-accent); }
.badge--light .icon { color: var(--color-icon-accent); }
.badge--dark { color: var(--color-text-inverse); }
.badge--dark .icon { color: var(--color-icon-accent-inverse); }

/* Chip (Figma 4109:5619): Type Static / Link */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-16);
  padding: 0;
  list-style: none;
}

.chip-list--left {
  justify-content: flex-start;
}

.chip-list > li {
  display: flex;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--layout-tap-target);
  padding: var(--spacing-12) var(--spacing-24);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font: var(--text-label-nav);
}

.chip .icon {
  width: 20px;
  height: 20px;
}

a.chip {
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

a.chip:hover {
  border-color: var(--color-border-accent);
  color: var(--color-text-accent);
}

a.chip:active {
  border-color: var(--color-border-accent);
  background: var(--color-bg-surface-active);
  color: var(--color-text-accent-active);
  transform: scale(var(--motion-press));
}

a.chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Section Header */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: 640px;
}

.section-header--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-header__eyebrow {
  color: var(--color-text-accent);
}

.section-header__title {
  color: var(--color-text-primary);
}

.section-header__intro {
  font: var(--text-body-intro);
  color: var(--color-text-muted);
}

/* Feature Card (Figma 4020:161): Tone Dark / Light, Type Static / Link */
.feature-card {
  display: flex;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  border-radius: var(--radius-lg);
}

.feature-card__icon .icon {
  width: 40px;
  height: 40px;
}

.feature-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-4);
}

.feature-card__title {
  font: var(--text-heading-h4);
}

.feature-card__body {
  font: var(--text-body-medium);
}

.feature-card__more {
  margin-top: var(--spacing-8);
}

.feature-card--dark { background: var(--color-bg-inverse); }
.feature-card--dark .feature-card__icon { color: var(--color-icon-accent-inverse); }
.feature-card--dark .feature-card__title { color: var(--color-text-accent-inverse); }
.feature-card--dark .feature-card__body { color: var(--color-text-inverse); }

.feature-card--light { background: var(--color-bg-surface); }
.feature-card--light .feature-card__icon { color: var(--color-icon-accent); }
.feature-card--light .feature-card__title { color: var(--color-text-primary); }
.feature-card--light .feature-card__body { color: var(--color-text-muted); }

/* Link variant: the whole card is the link and ends in a "Les mer" Link.
   Hover adds the accent border (inset, so the layout doesn't shift). */
a.feature-card {
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

a.feature-card--light:hover { box-shadow: inset 0 0 0 1px var(--color-border-accent); }
a.feature-card--light:active {
  background: var(--color-bg-surface-active);
  box-shadow: inset 0 0 0 1px var(--color-border-accent);
}

a.feature-card--dark:hover { background: var(--color-bg-inverse-hover); }
a.feature-card--dark:active { background: var(--color-bg-inverse-active); }

a.feature-card:active {
  transform: scale(var(--motion-press));
}

a.feature-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The "Les mer" link inside a card follows the card's hover */
a.feature-card:hover .link {
  text-decoration: underline;
}

a.feature-card--light:hover .link { color: var(--color-text-accent-hover); }
a.feature-card--dark:hover .link { color: var(--color-text-accent-inverse-hover); }

/* Price Card (Figma 4021:165): Featured, Type Price / Contact */
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-32);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.price-card--featured {
  border: 1.5px solid var(--color-border-accent);
}

/* Clickable card: the whole card is one link to the contact form */
a.price-card {
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

a.price-card:hover {
  border-color: var(--color-border-accent);
  background: var(--color-bg-surface-hover);
}

a.price-card:active {
  border-color: var(--color-border-accent);
  background: var(--color-bg-surface-active);
  transform: scale(var(--motion-press));
}

a.price-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The CTA is part of the card link and follows the card's state */
.price-card__cta {
  align-self: flex-start;
}

.price-card__cta::after {
  content: none;
}

a.price-card:hover .price-card__cta {
  color: var(--color-text-accent-hover);
  text-decoration: underline;
}

a.price-card:active .price-card__cta {
  color: var(--color-text-accent-active);
}

.price-card__tag {
  align-self: flex-start;
  padding: var(--spacing-4) var(--spacing-16);
  border-radius: var(--radius-full);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
}

.price-card__title {
  font: var(--text-heading-h4);
  color: var(--color-text-primary);
}

.price-card__duration,
.price-card__unit,
.price-card__body {
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

.price-card__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.price-card__price {
  font: var(--text-display-price);
  color: var(--color-text-accent);
}

.price-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* Process Step */
.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.process-step__number {
  font: var(--text-heading-h3);
  color: var(--color-text-accent);
}

.process-step__title {
  font: var(--text-heading-h4);
  color: var(--color-text-primary);
}

.process-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

/* Table Row (price table) */
.price-table {
  width: 100%;
  border-collapse: collapse;
}

.table-row {
  display: flex;
  align-items: center;
  padding-block: var(--spacing-16);
}

.table-row > th,
.table-row > td {
  padding: 0;
}

.table-row__name {
  flex: 1;
  font: var(--text-label-nav);
  color: var(--color-text-primary);
  text-align: left;
}

.table-row__detail {
  width: 180px;
  font: var(--text-body-medium);
  color: var(--color-text-muted);
}

.table-row__price {
  width: 140px;
  font: var(--text-heading-h4);
  color: var(--color-text-accent);
}

@media (max-width: 767px) {
  .table-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-4);
  }

  .table-row__detail {
    grid-row: 2;
    grid-column: 1 / -1;
    width: auto;
  }

  .table-row__price {
    width: auto;
    text-align: right;
  }
}

/* Note (Figma 4109:5623): Tone Default (on white) / On surface (on cream) */
.note {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.note--on-surface {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
}

.note__title {
  font: var(--text-heading-h4);
  color: var(--color-text-primary);
}

.note__body {
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

/* List Item (Figma 4133:6492): Marker Check / Dot, optional title */
.list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: 0;
  list-style: none;
}

.list-item {
  display: flex;
  gap: var(--spacing-12);
}

.list-item__marker {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 26px;
  color: var(--color-icon-accent);
}

.list-item__marker .icon {
  width: 20px;
  height: 20px;
}

.list-item--dot .list-item__marker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-icon-accent);
}

.list-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.list-item__title {
  font: var(--text-heading-h4);
  color: var(--color-text-primary);
}

.list-item__body {
  font: var(--text-body-medium);
  color: var(--color-text-primary);
}

.list-item__body a {
  color: var(--color-text-accent);
  text-decoration: underline;
}

/* Quote (Figma 4109:5657) */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding-left: var(--spacing-24);
  border-left: 2px solid var(--color-border-accent);
}

.quote__text {
  font: var(--text-quote);
  color: var(--color-text-primary);
}

.quote__source {
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

/* Testimonial (Figma 4169:570): Tone Light on white, On surface on cream */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin: 0;
  padding: var(--spacing-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.testimonial--on-surface {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
}

.testimonial__mark {
  font: var(--text-display-price);
  color: var(--color-text-accent);
}

.testimonial__quote {
  margin: 0;
  font: var(--text-body-large);
  color: var(--color-text-primary);
}

.testimonial__attribution {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.testimonial__icon {
  display: flex;
  flex: none;
  color: var(--color-icon-accent);
}

.testimonial__icon .icon {
  width: 40px;
  height: 40px;
}

.testimonial__who {
  display: flex;
  flex-direction: column;
}

.testimonial__name {
  font: var(--text-label-medium);
  color: var(--color-text-primary);
}

.testimonial__detail {
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

/* Hero Photo (Figma 4140:5874): round photo filling the circle */
.hero-photo {
  flex: none;
  aspect-ratio: 1;
}

.hero-photo picture {
  height: 100%;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* Logo Strip: logos are recoloured with text/accent using the "color" blend
   mode, as in Figma, so light and dark parts of each logo are kept */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-48);
  padding: 0;
  list-style: none;
}

.logo-strip__logo {
  position: relative;
  display: block;
  isolation: isolate;
  background: var(--logo) center / contain no-repeat;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.logo-strip__logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-text-accent);
  mix-blend-mode: color;
}

/* Input Field and Textarea */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.field__label {
  font: var(--text-label-small);
  color: var(--color-text-primary);
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--spacing-16);
  border: 1.5px solid var(--color-border-field);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font: var(--text-body-medium);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

textarea.field__control {
  min-height: 120px;
  padding: var(--spacing-12) var(--spacing-16);
  resize: vertical;
}

.field__control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Focus: 2px green border; the inset shadow adds the extra 0.5px without shifting layout */
.field__control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 0.5px var(--color-border-focus);
}

.field--error .field__control {
  border-color: var(--color-border-error);
}

.field__error {
  font: var(--text-caption);
  color: var(--color-text-error);
}

/* Links inside component text are underlined so they don't rely on colour alone */
.price-card__body a,
.note__body a,
.process-step__body a {
  color: var(--color-text-accent);
  text-decoration: underline;
}

/* Lists inside a process step */
.process-step__body ul {
  padding-left: var(--spacing-24);
}