@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Reservation journey */
.reservation-page {
  background: var(--surface-warm);
}

.reservation-hero {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--surface-warm);
}

.reservation-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.75fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.reservation-hero h1 {
  max-width: 780px;
  margin: 1.1rem 0 1.25rem;
  color: var(--indigo);
  font-size: clamp(2.7rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.reservation-hero h1 > span {
  color: var(--cyan);
}

.reservation-hero__lead {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.reservation-hero__assurance {
  display: flex;
  align-self: start;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 5.7rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 2px solid var(--cyan);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.reservation-hero__assurance-icon,
.reservation-empty__icon,
.reservation-confirmation__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  background: var(--indigo);
  color: #fff;
}

.reservation-hero__assurance-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.reservation-hero__assurance strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--indigo);
  font-size: 1.15rem;
}

.reservation-hero__assurance p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.reservation-main {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.reservation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.75fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.reservation-form {
  min-width: 0;
}

.reservation-form .contact-form__heading {
  align-items: flex-start;
  margin-bottom: 1.45rem;
}

.reservation-form .contact-form__heading-icon {
  margin-top: 0;
}

.reservation-form__heading-copy {
  min-width: 0;
}

.reservation-form__heading-copy h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.1vw, 1.7rem);
  line-height: 1.12;
}

.reservation-form .reservation-form__heading-copy p {
  margin: 0.22rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.reservation-form .contact-form__heading-icon .fa-icon {
  width: 1.45rem;
  height: 1.45rem;
  filter: brightness(0) invert(1);
}

.reservation-form__section {
  min-width: 0;
  margin: 0;
  padding: 0 0 1.5rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.reservation-form__section > legend {
  margin: 0 0 0.9rem;
  padding: 0 0.85rem 0 0;
  color: var(--indigo);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.2;
}

.reservation-form .form-field input[type="tel"],
.reservation-form .form-field input[readonly] {
  width: 100%;
  min-height: 54px;
  padding: 0.72rem 0.9rem;
  border: 1.5px solid #8b8ea1;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.reservation-form .form-field input[type="tel"]:hover,
.reservation-form .form-field input[type="tel"]:focus-visible {
  border-color: var(--indigo);
}

.reservation-form .form-field input[readonly] {
  background: var(--surface-warm);
  color: var(--muted);
}

.reservation-contact-method {
  padding: 1rem 1.1rem 1.15rem;
}

.reservation-contact-method .form-options__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reservation-contact-method__error {
  margin: 0.65rem 0 0;
  color: var(--red);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}

.reservation-contact-method:has(input[aria-invalid="true"]) {
  border-color: var(--red);
}

.form-field__help,
.reservation-form__submit-note {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.form-field__help {
  margin: 0.55rem 0 0;
}

.reservation-consents {
  display: grid;
  gap: 0.75rem;
}

.reservation-consents .form-consent {
  padding: 0.9rem 1rem;
}

.reservation-consents .form-consent a {
  color: var(--indigo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.reservation-consents .form-consent--optional {
  background: var(--surface-warm);
}

.reservation-form__submit {
  min-width: min(100%, 280px);
}

.reservation-form__submit[aria-busy="true"] {
  cursor: wait;
  opacity: 0.75;
}

.reservation-form__submit-note {
  max-width: 620px;
  margin: 0.9rem 0 0;
}

.reservation-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.reservation-summary {
  position: sticky;
  top: 126px;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.reservation-summary__logo {
  width: 132px;
  height: auto;
  margin-bottom: 1.35rem;
}

.reservation-summary .eyebrow {
  margin-bottom: 0.35rem;
  color: var(--indigo);
}

.reservation-summary h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.reservation-summary__founder {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(245, 171, 31, 0.16);
  color: var(--body-text, #55586c);
  font-size: 0.88rem;
  line-height: 1.55;
}

.reservation-summary__founder strong {
  color: var(--indigo);
}

.reservation-summary__items,
.reservation-summary__future ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-summary__items {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.reservation-summary__items > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.reservation-summary__items div {
  display: grid;
  gap: 0.18rem;
}

.reservation-summary__items strong {
  color: var(--ink);
  line-height: 1.35;
}

.reservation-summary__items div span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.reservation-summary__items > li > span {
  color: var(--indigo);
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.reservation-summary__totals {
  display: grid;
  gap: 0.65rem;
  margin: 1.35rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}

.reservation-summary__totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}

.reservation-summary__totals dt,
.reservation-summary__totals dd {
  margin: 0;
}

.reservation-summary__totals dd {
  color: var(--ink);
  font-weight: 800;
  text-align: right;
}

.reservation-summary__totals .reservation-summary__saving dd {
  color: var(--indigo);
}

.reservation-summary__totals .reservation-summary__saving--founder {
  padding: 0.65rem;
  border-radius: 10px;
  background: rgba(245, 171, 31, 0.16);
}

.reservation-summary__totals .reservation-summary__total {
  margin-top: 0.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.reservation-summary__totals .reservation-summary__total dd {
  color: var(--indigo);
  font-size: 1.35rem;
}

.reservation-summary__monthly {
  color: var(--indigo) !important;
}

.reservation-summary__vat {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.reservation-summary__future {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--hero-label-surface);
}

.reservation-summary__future strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--indigo);
}

.reservation-summary__future li {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.reservation-summary__edit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.35rem;
  color: var(--indigo);
  font-weight: 800;
  text-decoration: none;
}

.reservation-summary__edit:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.reservation-empty,
.reservation-confirmation {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.reservation-confirmation {
  max-width: 960px;
  padding: clamp(2rem, 4vw, 3.25rem);
}

.reservation-confirmation:focus {
  outline: none;
  box-shadow: var(--shadow-soft);
}

.reservation-empty__icon,
.reservation-confirmation__icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 1.25rem;
  border-radius: 20px;
}

.reservation-confirmation__icon {
  width: 52px;
  height: 52px;
  margin: 0;
  background: var(--cyan);
  border-radius: 16px;
}

.reservation-confirmation__icon .fa-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.reservation-confirmation__heading {
  text-align: center;
}

.reservation-empty h2,
.reservation-confirmation h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
}

.reservation-confirmation h2 {
  font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.reservation-empty h2 > span {
  color: var(--red);
}

.reservation-confirmation h2 > span {
  color: var(--cyan);
}

.reservation-empty > p,
.reservation-confirmation > p {
  max-width: 690px;
  margin: 1rem auto 0;
  color: var(--muted);
  line-height: 1.65;
}

.reservation-confirmation .eyebrow {
  display: block;
  width: auto;
  margin: 0 0 0.28rem;
  color: var(--red);
  text-align: center;
}

.reservation-confirmation__lead {
  margin-top: 0.75rem !important;
  color: var(--ink) !important;
  font-size: 1.08rem;
  font-weight: 700;
}

.reservation-confirmation__reference {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 1rem;
  max-width: 560px;
  margin: 1.15rem auto 1.25rem;
  padding: 0.9rem 1.25rem;
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius-md);
  background: var(--hero-label-surface);
}

.reservation-confirmation__reference::after {
  width: 52px;
  height: 52px;
  content: "";
}

.reservation-confirmation__reference-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  text-align: center;
}

.reservation-confirmation__reference-copy > span {
  color: var(--muted);
  font-size: 0.85rem;
}

.reservation-confirmation__reference strong {
  color: var(--indigo);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  letter-spacing: 0.04em;
}

.reservation-confirmation__content {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  text-align: left;
}

.reservation-confirmation__email,
.reservation-confirmation__next {
  min-width: 0;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.reservation-confirmation__email {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.reservation-confirmation__email-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--indigo);
  color: #fff;
}

.reservation-confirmation__email-icon .fa-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.reservation-confirmation__email h3,
.reservation-confirmation__next h3 {
  margin: 0 0 0.55rem;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.3;
}

.reservation-confirmation__email p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.reservation-confirmation__next ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.reservation-confirmation__reference-note {
  margin-top: 0.45rem !important;
  color: var(--ink) !important;
  font-weight: 700;
}

.reservation-confirmation__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.3rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  text-align: left;
}

.reservation-confirmation__contact {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.reservation-confirmation__contact a {
  color: var(--indigo);
  font-weight: 800;
  text-underline-offset: 0.18em;
}

.reservation-confirmation__next li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.reservation-confirmation__next li::before {
  position: absolute;
  top: 0.48rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber);
  content: "";
}

.reservation-empty__actions,
.reservation-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.reservation-confirmation__actions {
  flex: 0 0 auto;
  margin-top: 0;
}

html[data-display-mode="calm"] .reservation-page,
html[data-display-mode="calm"] .reservation-main {
  background: var(--calm-surface, var(--surface-warm));
}

html[data-display-mode="calm"] .reservation-hero {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .reservation-hero__assurance,
html[data-display-mode="calm"] .reservation-summary,
html[data-display-mode="calm"] .reservation-empty,
html[data-display-mode="calm"] .reservation-confirmation {
  box-shadow: none;
}

@media (max-width: 960px) {
  .reservation-hero__inner,
  .reservation-layout {
    grid-template-columns: 1fr;
  }

  .reservation-hero__assurance {
    max-width: 720px;
    margin-top: 0;
  }

  .reservation-summary {
    position: static;
    order: -1;
  }
}

@media (max-width: 640px) {
  .reservation-hero {
    padding-top: 2.5rem;
  }

  .reservation-hero h1 {
    font-size: clamp(2.45rem, 13vw, 3.6rem);
  }

  .reservation-hero__assurance {
    display: grid;
  }

  .reservation-form__section {
    padding: 1.5rem 0;
  }

  .reservation-contact-method .form-options__grid {
    grid-template-columns: 1fr;
  }

  .reservation-summary__items > li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .reservation-summary__items > li > span {
    text-align: left;
  }

  .reservation-empty__actions,
  .reservation-confirmation__actions {
    display: grid;
  }

  .reservation-empty__actions .button,
  .reservation-confirmation__actions .button {
    width: 100%;
  }

  .reservation-confirmation__reference {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 0.65rem;
    padding-inline: 0.9rem;
  }

  .reservation-confirmation__reference .reservation-confirmation__icon,
  .reservation-confirmation__reference::after {
    width: 46px;
    height: 46px;
  }

  .reservation-confirmation__content {
    grid-template-columns: 1fr;
  }

  .reservation-confirmation__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .reservation-confirmation__actions {
    justify-content: flex-start;
  }
}

/* Secure checkout */
.checkout-page {
  background: var(--surface-warm);
}

.checkout-hero {
  padding: clamp(3.2rem, 6vw, 5.6rem) 0 clamp(2.8rem, 5vw, 4.5rem);
  background:
    radial-gradient(circle at 94% 12%, rgba(89, 194, 222, 0.18) 0 10rem, transparent 10.1rem),
    var(--surface-warm);
}

.checkout-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.checkout-hero h1 {
  max-width: 850px;
  margin: 1rem 0 1.15rem;
  color: var(--indigo);
  font-size: clamp(2.7rem, 5.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.checkout-hero h1 span,
.checkout-success h2 span {
  color: var(--cyan);
}

.checkout-hero__inner > div > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.65;
}

.checkout-hero__assurance {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.checkout-hero__assurance-icon,
.checkout-payment__icon,
.checkout-alert__icon,
.checkout-success__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
}

.checkout-hero__assurance-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--indigo);
}

.checkout-hero__assurance strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--indigo);
  font-size: 1.08rem;
}

.checkout-hero__assurance p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.checkout-main {
  min-height: 48vh;
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(420px, 1.22fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.checkout-summary,
.checkout-payment,
.checkout-success {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.checkout-summary {
  position: sticky;
  top: 126px;
  overflow: hidden;
  padding: clamp(1.45rem, 3vw, 2.15rem);
}

.checkout-summary__logo {
  width: 128px;
  height: auto;
  margin-bottom: 1.3rem;
}

.checkout-summary .eyebrow,
.checkout-payment .eyebrow,
.checkout-success .eyebrow {
  margin: 0 0 0.3rem;
  color: var(--red);
}

.checkout-summary h2,
.checkout-payment h2,
.checkout-success h2 {
  margin: 0;
  color: var(--indigo);
  line-height: 1.12;
}

.checkout-summary h2 {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.checkout-summary__reference {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.checkout-summary__reference strong {
  color: var(--indigo);
  letter-spacing: 0.03em;
}

.checkout-summary__items {
  display: grid;
  gap: 0.85rem;
  margin: 1.35rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.checkout-summary__items > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
}

.checkout-summary__items div {
  display: grid;
  gap: 0.16rem;
}

.checkout-summary__items strong {
  color: var(--ink);
  line-height: 1.35;
}

.checkout-summary__items div span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.checkout-summary__items > li > span {
  color: var(--indigo);
  font-weight: 800;
  white-space: nowrap;
}

.checkout-summary__totals {
  display: grid;
  gap: 0.62rem;
  margin: 1.3rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
}

.checkout-summary__totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}

.checkout-summary__totals dt,
.checkout-summary__totals dd {
  margin: 0;
}

.checkout-summary__totals dd {
  color: var(--ink);
  font-weight: 800;
  text-align: right;
}

.checkout-summary__saving dd,
.checkout-summary__monthly,
.checkout-summary__monthly dd {
  color: var(--indigo);
}

.checkout-summary__total {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
  font-weight: 800;
}

.checkout-summary__total dd {
  color: var(--indigo);
  font-size: 1.4rem;
}

.checkout-summary__monthly {
  margin-top: 0.35rem;
  padding: 0.8rem;
  border-radius: 12px;
  background: rgba(89, 194, 222, 0.12);
  font-size: 0.87rem;
}

.checkout-summary__tax {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.checkout-payment {
  min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.checkout-payment__heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.checkout-payment__icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--indigo);
}

.checkout-payment h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.checkout-payment__provider {
  min-height: 400px;
}

.checkout-payment__note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  color: var(--indigo);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.checkout-payment__note .fa-icon {
  flex: 0 0 auto;
}

.checkout-payment__terms {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.checkout-payment__terms a {
  color: var(--indigo);
  font-weight: 700;
  text-underline-offset: 0.16em;
}

.checkout-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 240px;
  color: var(--indigo);
  font-weight: 800;
}

.checkout-loading__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(74, 79, 158, 0.18);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: checkout-spin 0.8s linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

.checkout-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 780px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(232, 64, 64, 0.3);
  border-radius: var(--radius-md);
  background: rgba(232, 64, 64, 0.08);
}

.checkout-alert:focus,
.checkout-success:focus {
  outline: none;
}

.checkout-alert[data-status="success"],
.checkout-alert[data-status="info"] {
  border-color: rgba(89, 194, 222, 0.55);
  background: rgba(89, 194, 222, 0.11);
}

.checkout-alert[data-status="warning"] {
  border-color: rgba(245, 171, 31, 0.55);
  background: rgba(245, 171, 31, 0.12);
}

.checkout-alert__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--indigo);
}

.checkout-alert strong,
.checkout-alert span {
  display: block;
}

.checkout-alert strong {
  margin-bottom: 0.22rem;
  color: var(--indigo);
}

.checkout-alert div > span {
  color: var(--muted);
  line-height: 1.5;
}

.checkout-success {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.checkout-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 20px;
  background: var(--cyan);
}

.checkout-success h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
}

.checkout-success > p:not(.eyebrow) {
  max-width: 620px;
  margin: 1rem auto 0;
  color: var(--muted);
  line-height: 1.65;
}

.checkout-success__reference {
  display: grid;
  gap: 0.3rem;
  max-width: 520px;
  margin: 1.5rem auto;
  padding: 1.1rem 1.3rem;
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius-md);
  background: var(--hero-label-surface);
}

.checkout-success__reference span {
  color: var(--muted);
  font-size: 0.84rem;
}

.checkout-success__reference strong {
  color: var(--indigo);
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  letter-spacing: 0.04em;
}

.checkout-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.7rem;
}

html[data-display-mode="calm"] .checkout-page,
html[data-display-mode="calm"] .checkout-hero,
html[data-display-mode="calm"] .checkout-main {
  background: var(--calm-surface, var(--surface-warm));
}

html[data-display-mode="calm"] .checkout-summary,
html[data-display-mode="calm"] .checkout-payment,
html[data-display-mode="calm"] .checkout-success,
html[data-display-mode="calm"] .checkout-hero__assurance {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .checkout-loading__spinner { animation: none; }
}

@media (max-width: 960px) {
  .checkout-hero__inner,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-hero__assurance {
    max-width: 720px;
  }

  .checkout-summary {
    position: static;
  }
}

@media (max-width: 640px) {
  .checkout-hero {
    padding-top: 2.5rem;
  }

  .checkout-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .checkout-hero__assurance {
    display: grid;
  }

  .checkout-summary__items > li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .checkout-summary__items > li > span {
    text-align: left;
  }

  .checkout-summary__totals > div {
    align-items: flex-start;
  }

  .checkout-success__actions {
    display: grid;
  }

  .checkout-success__actions .button {
    width: 100%;
  }
}

/* Get Eletron package builder */
.get-eletron-page {
  --builder-border: rgba(74, 79, 158, 0.2);
  --builder-surface: #fff;
  --builder-soft: #f4f4f6;
}

.package-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 10%, rgba(89, 194, 222, 0.18) 0 12rem, transparent 12.1rem),
    radial-gradient(circle at 5% 94%, rgba(245, 171, 31, 0.12) 0 9rem, transparent 9.1rem),
    var(--page-background, #faf8f2);
}

.package-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  min-height: min(760px, calc(100vh - 108px));
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.package-intro__copy h1 {
  max-width: 12ch;
  margin: 1.15rem 0 1.25rem;
  color: var(--indigo);
  font-size: clamp(3rem, 5.7vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.package-intro__copy h1 span {
  color: var(--amber);
}

.package-intro__lead {
  max-width: 600px;
  margin: 0;
  color: var(--body-text, #4f5268);
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  line-height: 1.72;
}

.package-intro__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
}

.package-intro__shop-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  color: var(--indigo);
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.package-intro__shop-link .fa-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.package-intro__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.package-intro__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--body-text, #4f5268);
  font-size: 0.92rem;
  font-weight: 680;
}

.package-intro__trust .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--cyan);
}

.package-intro__visual {
  position: relative;
}

.package-intro__visual > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.package-intro__badge {
  position: absolute;
  right: clamp(0.4rem, 2vw, 1.5rem);
  bottom: clamp(0.4rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 270px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(74, 79, 158, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(41, 45, 103, 0.12);
  color: var(--indigo-dark);
  font-size: 0.85rem;
  line-height: 1.4;
}

.package-intro__badge img {
  width: 94px;
  height: auto;
  flex: 0 0 auto;
}

.package-builder-section {
  background: #f4f4f6;
}

.package-builder-section > .container {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.package-builder__heading {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.package-builder__heading h2 {
  margin: 0.65rem 0 0.9rem;
  color: var(--indigo);
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.package-builder__heading h2 span {
  color: var(--red);
}

.package-builder__heading > p:last-child {
  max-width: 680px;
  color: var(--body-text, #4f5268);
  font-size: 1.06rem;
  line-height: 1.7;
}

.builder-progress {
  margin-bottom: 2rem;
}

.builder-progress ol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.builder-progress li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  color: #6c6f80;
  font-size: 0.78rem;
  font-weight: 760;
}

.builder-progress li span {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
}

.builder-progress li[aria-current="step"] {
  background: var(--indigo);
  color: #fff;
}

.builder-progress li.is-complete {
  color: var(--indigo);
  background: rgba(74, 79, 158, 0.08);
}

.package-builder__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.4rem);
}

.package-builder,
.package-summary__inner {
  border: 1px solid var(--builder-border);
  border-radius: 24px;
  background: var(--builder-surface);
  box-shadow: 0 18px 48px rgba(41, 45, 103, 0.08);
}

.package-builder {
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

.builder-step__header {
  display: block;
  margin-bottom: 1.8rem;
}

.builder-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2rem;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.builder-step__header h2,
.builder-step__header h3 {
  margin: 0.85rem 0 0.4rem;
  color: var(--indigo);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.builder-step__header > p:last-child {
  margin: 0;
  max-width: 62ch;
  color: var(--body-text, #5b5e72);
  line-height: 1.6;
}

.choice-fieldset,
.contact-fields,
.data-allowance {
  margin: 0;
  padding: 0;
  border: 0;
}

.device-choice-grid,
.plan-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.select-card,
.accessory-card,
.future-service {
  position: relative;
  border: 1px solid var(--builder-border);
  border-radius: 20px;
  background: #fff;
}

.select-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.select-card:hover {
  border-color: rgba(74, 79, 158, 0.48);
  box-shadow: 0 10px 24px rgba(41, 45, 103, 0.08);
}

.select-card:has(input:checked) {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.13);
}

.select-card > input,
.accessory-card > label > input,
.future-service input,
.case-colours input,
.data-allowance input,
.consent-check input {
  accent-color: var(--indigo);
}

.select-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.select-card:has(input:focus-visible),
.accessory-card:has(input:focus-visible),
.future-service:has(input:focus-visible),
.case-colours label:has(input:focus-visible),
.data-allowance label:has(input:focus-visible),
.consent-check:has(input:focus-visible) {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.select-card__check {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(74, 79, 158, 0.25);
  border-radius: 50%;
  background: #fff;
  opacity: 0.62;
}

.select-card:has(input:checked) .select-card__check {
  border-color: var(--indigo);
  background: var(--indigo);
  opacity: 1;
}

.select-card__check .fa-icon {
  width: 0.85rem;
  height: 0.85rem;
  background-color: var(--indigo);
}

.select-card:has(input:checked) .select-card__check .fa-icon {
  background-color: #fff;
}

.device-card__icon,
.plan-card__icon,
.order-route-card__icon,
.future-service__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--indigo);
}

.device-card__icon--amber,
.plan-card--connected .plan-card__icon {
  background: var(--amber);
}

.device-card__icon--cyan,
.plan-card--empowered .plan-card__icon {
  background: var(--cyan);
}

.device-card__icon--red {
  background: var(--red);
}

.device-card__icon .fa-icon,
.plan-card__icon .fa-icon,
.order-route-card__icon .fa-icon,
.future-service__icon .fa-icon {
  width: 1.3rem;
  height: 1.3rem;
  background-color: #fff;
}

.device-card__model {
  padding-right: 1.8rem;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.3;
}

.device-card__price,
.plan-card__price,
.accessory-card__price {
  display: block;
  margin-top: 0.65rem;
  color: #171927;
  font-size: 1.55rem;
  font-weight: 820;
}

.device-card__description,
.select-card > span:last-child {
  margin-top: 0.65rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.91rem;
  line-height: 1.55;
}

.product-details,
.plan-card details {
  margin-top: 1.2rem;
  border-top: 1px solid rgba(74, 79, 158, 0.16);
  padding-top: 0.85rem;
}

.product-details summary,
.plan-card details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 44px;
  color: var(--indigo);
  font-weight: 760;
  cursor: pointer;
}

.product-details summary::-webkit-details-marker,
.plan-card details summary::-webkit-details-marker {
  display: none;
}

.product-details summary .fa-icon,
.plan-card details summary .fa-icon {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 160ms ease;
}

.product-details[open] summary .fa-icon,
.plan-card details[open] summary .fa-icon {
  transform: rotate(180deg);
}

.product-details ul,
.plan-card details ul {
  margin: 0.65rem 0 0;
  padding-left: 1.1rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.88rem;
  line-height: 1.6;
}

.plan-card {
  min-height: 290px;
}

.plan-card--connected {
  border-color: rgba(232, 64, 64, 0.56);
}

.plan-card--empowered {
  border-color: rgba(245, 171, 31, 0.72);
}

.plan-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.plan-detail-grid > div {
  padding: 0.9rem;
  border-radius: 14px;
  background: var(--builder-soft);
  color: var(--body-text, #5b5e72);
  font-size: 0.86rem;
  line-height: 1.5;
}

.plan-saving {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--amber);
  border-radius: 0 12px 12px 0;
  background: rgba(245, 171, 31, 0.12);
  color: var(--indigo-dark);
  line-height: 1.55;
}

.accessory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.accessory-card {
  overflow: hidden;
}

.accessory-card > label {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 154px;
  padding: 1rem;
  cursor: pointer;
}

.accessory-card:has(> label > input:checked) {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.13);
}

.accessory-card > label > input {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.2rem;
  height: 1.2rem;
}

.accessory-card__image {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  padding: 0.35rem;
  border-radius: 16px;
  background: #f7f7f8;
}

.accessory-card__image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
}

.accessory-card strong {
  display: block;
  padding-right: 1.4rem;
  color: var(--indigo);
  line-height: 1.35;
}

.accessory-card__price {
  font-size: 1.16rem;
}

.accessory-card__note {
  display: block;
  margin-top: 0.45rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.82rem;
  line-height: 1.5;
}

.accessory-card--case > label {
  min-height: 178px;
}

.case-colours {
  margin: 0 1rem 1rem;
  padding: 1rem;
  border: 1px solid rgba(74, 79, 158, 0.16);
  border-radius: 14px;
  background: var(--builder-soft);
}

.case-colours legend {
  margin-bottom: 0.65rem;
  color: var(--indigo);
  font-size: 0.85rem;
  font-weight: 760;
}

.case-colours > div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
}

.case-colours label {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.case-colours input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.case-colours img {
  width: 34px;
  height: 34px;
  border: 2px solid transparent;
  border-radius: 10px;
}

.case-colours label:has(input:checked) img {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo);
}

.case-colours span {
  color: var(--body-text, #5b5e72);
  font-size: 0.68rem;
}

.trust-logo {
  display: block;
  width: auto;
  max-width: 116px;
  height: auto;
  max-height: 54px;
  margin-top: 0.65rem;
  object-fit: contain;
}

.trust-logo--what-hifi {
  max-height: 62px;
}

.future-service-list {
  display: grid;
  gap: 1rem;
}

.future-service {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem;
}

.future-service > input,
.future-service > label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.future-service > label {
  display: contents;
  cursor: pointer;
}

.future-service__icon {
  margin: 0;
}

.future-service strong,
.future-service small {
  display: block;
}

.future-service strong {
  margin-bottom: 0.25rem;
  color: var(--indigo);
}

.future-service small {
  color: var(--body-text, #5b5e72);
  line-height: 1.5;
}

.future-service__toggle {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #d6d8e6;
  transition: background 160ms ease;
}

.future-service__toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  transition: transform 160ms ease;
}

.future-service:has(input:checked) {
  border-color: var(--indigo);
}

.future-service:has(input:checked) .future-service__toggle {
  background: var(--indigo);
}

.future-service:has(input:checked) .future-service__toggle::after {
  transform: translateX(20px);
}

.data-allowance {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--builder-soft);
}

.data-allowance legend {
  margin-bottom: 0.65rem;
  color: var(--indigo);
  font-weight: 720;
}

.data-allowance label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-right: 1.1rem;
  cursor: pointer;
}

.future-service-note,
.prototype-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(89, 194, 222, 0.13);
  color: var(--indigo-dark);
}

.future-service-note .fa-icon,
.prototype-note .fa-icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex: 0 0 auto;
  background-color: var(--cyan);
}

.future-service-note p,
.prototype-note p {
  margin: 0;
  line-height: 1.55;
}

.final-review {
  margin-bottom: 1.5rem;
  padding: 1.1rem;
  border-radius: 16px;
  background: var(--builder-soft);
}

.final-review h3,
.contact-fields legend {
  margin-bottom: 0.9rem;
  color: var(--indigo);
  font-size: 1.1rem;
  font-weight: 780;
}

.order-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.order-route-card {
  min-height: 210px;
}

.order-route-card--founder {
  border-color: rgba(245, 171, 31, 0.7);
}

.order-route-card__icon {
  margin-bottom: 1rem;
}

.order-route-card--founder .order-route-card__icon {
  background: var(--amber);
}

.founder-information {
  margin-top: 1rem;
  padding: 1.1rem;
  border: 1px solid rgba(245, 171, 31, 0.6);
  border-radius: 16px;
  background: rgba(245, 171, 31, 0.1);
  color: var(--body-text, #4f5268);
  line-height: 1.6;
}

.founder-information h3 {
  margin: 0 0 0.5rem;
  color: var(--indigo);
}

.founder-information p {
  margin: 0.45rem 0;
}

.founder-information__privacy {
  font-size: 0.86rem;
  font-weight: 680;
}

.contact-fields {
  margin-top: 1.5rem;
}

.contact-fields__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-fields__grid label:last-child {
  grid-column: 1 / -1;
}

.contact-fields__grid label,
.consent-check {
  color: var(--indigo-dark);
  font-weight: 680;
}

.contact-fields__grid label > span {
  display: block;
  margin-bottom: 0.45rem;
}

.contact-fields__grid input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(74, 79, 158, 0.28);
  border-radius: 12px;
  background: #fff;
  padding: 0.75rem 0.85rem;
  color: #21233b;
  font: inherit;
}

.contact-fields__grid input:focus {
  border-color: var(--indigo);
  outline: 3px solid rgba(245, 171, 31, 0.55);
  outline-offset: 2px;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}

.consent-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  flex: 0 0 auto;
}

.builder-controls {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(74, 79, 158, 0.15);
}

.builder-controls [data-builder-next],
.builder-controls [data-builder-submit] {
  margin-left: auto;
}

.builder-controls .fa-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.builder-error {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(232, 64, 64, 0.1);
  color: #8b2424;
  font-weight: 680;
}

.submit-status {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(89, 194, 222, 0.15);
  color: var(--indigo-dark);
  font-weight: 680;
  line-height: 1.55;
}

.package-summary {
  position: sticky;
  top: calc(var(--header-sticky-offset, 96px) + 1.25rem);
}

.package-summary__inner {
  position: relative;
  padding: 1.4rem;
}

.package-summary__reset {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--indigo);
  border-radius: 50%;
  background: var(--builder-surface);
  color: var(--indigo);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.package-summary__reset:hover {
  background: var(--indigo);
  color: #fff;
}

.package-summary__reset .fa-icon {
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
}

.package-summary h3 {
  margin: 0.35rem 0 1rem;
  color: var(--indigo);
  font-size: 1.55rem;
}

.package-summary__empty {
  padding: 1rem;
  border-radius: 12px;
  background: var(--builder-soft);
  color: var(--body-text, #5b5e72);
  line-height: 1.5;
}

.package-summary__items {
  margin: 0;
}

.package-summary__items > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(74, 79, 158, 0.12);
}

.package-summary__items dt,
.package-summary__items dd {
  margin: 0;
}

.package-summary__items dt {
  color: var(--body-text, #5b5e72);
  font-size: 0.84rem;
  line-height: 1.4;
}

.package-summary__items dd {
  color: var(--indigo-dark);
  font-weight: 760;
  white-space: nowrap;
}

.package-summary__discounts {
  margin-top: 0.7rem;
  padding: 0.75rem;
  border-radius: 11px;
  background: rgba(245, 171, 31, 0.12);
  color: var(--indigo-dark);
  font-size: 0.84rem;
  line-height: 1.5;
}

.package-summary__total,
.package-summary__monthly {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.package-summary__total {
  padding-top: 1rem;
  border-top: 2px solid var(--indigo);
}

.package-summary__total span,
.package-summary__monthly span {
  color: var(--body-text, #5b5e72);
  font-size: 0.86rem;
  font-weight: 680;
}

.package-summary__total strong {
  color: #151727;
  font-size: 1.65rem;
}

.package-summary__monthly strong {
  color: var(--indigo);
}

.package-summary__vat,
.package-summary__draft {
  color: var(--body-text, #626576);
  font-size: 0.76rem;
  line-height: 1.5;
}

.package-summary__draft {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0;
}

.package-summary__draft .fa-icon {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.12rem;
  flex: 0 0 auto;
  background-color: var(--cyan);
}

.package-reset-dialog {
  width: min(480px, calc(100% - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--ink);
}

.package-reset-dialog::backdrop {
  background: rgba(21, 23, 39, 0.62);
  backdrop-filter: blur(2px);
}

.package-reset-dialog__surface {
  padding: clamp(1.35rem, 4vw, 2rem);
  border: 2px solid var(--red);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(21, 23, 39, 0.24);
}

.package-reset-dialog__icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}

.package-reset-dialog__icon .fa-icon {
  width: 1.15rem;
  height: 1.15rem;
  background-color: currentColor;
}

.package-reset-dialog h2 {
  margin: 1rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.65rem, 5vw, 2.15rem);
}

.package-reset-dialog p {
  margin: 0.7rem 0 0;
  color: var(--body-text, #5b5e72);
  line-height: 1.6;
}

.package-reset-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.package-reset-dialog__actions .button {
  min-width: 9.5rem;
}

.package-reset-dialog__confirm {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.package-reset-dialog__confirm:hover {
  border-color: var(--indigo);
  background: var(--indigo);
}

@media (max-width: 480px) {
  .package-reset-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .package-reset-dialog__actions .button {
    width: 100%;
  }
}

.founder-case-dialog {
  width: min(960px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--ink);
}

body.founder-case-dialog-open {
  overflow: hidden;
}

.founder-case-dialog::backdrop {
  background: rgba(21, 23, 39, 0.64);
  backdrop-filter: blur(2px);
}

.founder-case-dialog__surface {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 2px solid var(--cyan);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(21, 23, 39, 0.26);
}

.founder-case-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.founder-case-dialog__header .eyebrow {
  margin-bottom: 0.35rem;
  color: var(--red);
}

.founder-case-dialog__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  line-height: 1.08;
}

.founder-case-dialog__header h2 span {
  color: var(--cyan);
}

.founder-case-dialog__close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.28);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.founder-case-dialog__close .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--indigo);
}

.founder-case-dialog__surface > p:not(.founder-case-dialog__error) {
  max-width: 65ch;
  margin: 0.85rem 0 0;
  color: var(--body-text, #5b5e72);
  line-height: 1.6;
}

.founder-case-dialog__choices {
  min-width: 0;
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
}

.founder-case-dialog__choices legend {
  margin-bottom: 0.7rem;
  color: var(--indigo);
  font-weight: 800;
}

.founder-case-dialog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.founder-case-dialog__grid label {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.4rem;
  padding: 0.55rem;
  border: 2px solid rgba(74, 79, 158, 0.2);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--indigo);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.founder-case-dialog__grid label:hover {
  border-color: var(--indigo);
}

.founder-case-dialog__grid label:has(input:checked) {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(89, 194, 222, 0.22);
}

.founder-case-dialog__grid label:has(input:focus-visible) {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.founder-case-dialog__grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.founder-case-dialog__grid img {
  display: block;
  width: min(100%, 150px);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: calc(var(--radius-md) - 0.35rem);
  object-fit: contain;
}

.founder-case-dialog__grid span {
  padding: 0.05rem 0.2rem 0.2rem;
}

.founder-case-dialog__error {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(232, 64, 64, 0.1);
  color: #a11919;
  font-weight: 750;
}

.founder-case-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.founder-case-dialog__actions .button {
  min-width: 13rem;
}

.checkout-launch-dialog {
  width: min(720px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
}

body.checkout-launch-dialog-open {
  overflow: hidden;
}

.checkout-launch-dialog::backdrop {
  background: rgba(21, 23, 39, 0.68);
  backdrop-filter: blur(2px);
}

.checkout-launch-dialog__surface {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 2px solid var(--cyan);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(21, 23, 39, 0.28);
}

.checkout-launch-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.checkout-launch-dialog__header .eyebrow {
  margin-bottom: 0.35rem;
  color: var(--red);
}

.checkout-launch-dialog__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.1;
}

.checkout-launch-dialog__header h2 span {
  color: var(--cyan);
}

.checkout-launch-dialog__close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.24);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.checkout-launch-dialog__close .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--indigo);
}

.checkout-launch-dialog__copy {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.checkout-launch-dialog__copy p {
  max-width: 67ch;
  margin: 0;
  color: var(--body-text, #5b5e72);
  line-height: 1.65;
}

.checkout-launch-dialog__copy p:nth-child(2) {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(245, 171, 31, 0.14);
  color: var(--ink);
  font-weight: 700;
}

.checkout-launch-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.checkout-launch-dialog__actions .button {
  min-width: 13rem;
  justify-content: center;
}

html[data-display-mode="calm"] .checkout-launch-dialog__surface,
html[data-display-mode="calm"] .checkout-launch-dialog__close {
  background: var(--builder-surface, #f4efe5);
  box-shadow: none;
}

@media (max-width: 900px) {
  .founder-case-dialog {
    width: min(100% - 1rem, 760px);
  }

  .founder-case-dialog__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .founder-case-dialog__grid img {
    width: min(100%, 150px);
    justify-self: center;
  }
}

@media (max-height: 800px) and (min-width: 601px) {
  .founder-case-dialog__surface {
    padding: 1rem 1.25rem;
  }

  .founder-case-dialog__header h2 {
    font-size: clamp(1.65rem, 3vw, 2rem);
  }

  .founder-case-dialog__surface > p:not(.founder-case-dialog__error) {
    margin-top: 0.55rem;
    line-height: 1.45;
  }

  .founder-case-dialog__choices {
    margin-top: 0.7rem;
  }

  .founder-case-dialog__choices legend {
    margin-bottom: 0.45rem;
  }

  .founder-case-dialog__grid {
    gap: 0.55rem;
  }

  .founder-case-dialog__grid label {
    gap: 0.2rem;
    padding: 0.35rem;
  }

  .founder-case-dialog__grid img {
    width: min(100%, 108px);
  }

  .founder-case-dialog__grid span {
    padding-bottom: 0.1rem;
  }

  .founder-case-dialog__actions {
    margin-top: 0.75rem;
  }
}

@media (max-width: 600px) {
  .founder-case-dialog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .founder-case-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .founder-case-dialog__actions .button {
    width: 100%;
  }

  .checkout-launch-dialog {
    width: min(100% - 1rem, 720px);
  }

  .checkout-launch-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkout-launch-dialog__actions .button {
    width: 100%;
  }
}

/* Individual product catalogue */
.shop-page {
  --builder-border: rgba(74, 79, 158, 0.2);
  --builder-surface: #fff;
  --builder-soft: #f4f4f6;
}

.shop-catalogue {
  background: var(--page-background, #faf8f2);
}

.shop-intro {
  border-bottom: 1px solid rgba(74, 79, 158, 0.14);
  background:
    radial-gradient(circle at 98% 9%, rgba(89, 194, 222, 0.09) 0 10.5rem, transparent 10.6rem),
    radial-gradient(circle at 5% 92%, rgba(245, 171, 31, 0.1) 0 9rem, transparent 9.1rem),
    linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
}

.shop-catalogue__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding-block: clamp(4rem, 7vw, 6rem) 2.5rem;
}

.shop-catalogue__intro h1 {
  max-width: 15ch;
  margin: 0 0 1rem;
  color: var(--indigo);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.shop-catalogue__intro h1 span {
  color: var(--amber);
}

.shop-catalogue__intro p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--body-text, #55586c);
  font-size: 1.05rem;
  line-height: 1.7;
}

.shop-guided-route {
  width: min(410px, 100%);
  justify-self: end;
}

.shop-guided-card {
  width: 100%;
  overflow: hidden;
  padding: 1.15rem;
  border: 1px solid rgba(74, 79, 158, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(31, 35, 82, 0.07);
}

.shop-guided-card__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.shop-guided-card__copy > p {
  margin: 0 0 0.3rem;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-guided-card__copy > strong {
  display: block;
  color: var(--indigo);
  line-height: 1.45;
}

.shop-guided-card .button {
  width: 100%;
  justify-content: center;
  margin-top: 0.9rem;
}

.shop-guided-card__monty {
  display: block;
  width: clamp(86px, 9vw, 118px);
  max-width: none;
  height: auto;
  margin: 0 1.15rem -2px auto;
  object-fit: contain;
}

.shop-page .button--outline {
  border-color: var(--indigo);
  background: transparent;
  color: var(--indigo);
}

.shop-page button.button--outline {
  appearance: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.shop-page .button--outline:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}

.shop-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-bottom: 1.5rem;
}

.shop-jump a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(74, 79, 158, 0.28);
  border-radius: 999px;
  background: #fff;
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 720;
  text-decoration: none;
}

.shop-jump a:hover,
.shop-jump a:focus-visible {
  border-color: var(--indigo);
  background: rgba(89, 194, 222, 0.11);
}

.shop-section {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.shop-section + .shop-section {
  border-top: 1px solid rgba(74, 79, 158, 0.14);
}

.shop-section--soft {
  background: rgba(74, 79, 158, 0.045);
}

.shop-section__heading {
  max-width: 720px;
  margin-bottom: 1.7rem;
}

.shop-section__heading h2 {
  margin: 0.45rem 0 0.75rem;
  color: var(--indigo);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
}

.shop-section__heading h2 span {
  color: var(--cyan);
}

.shop-section__heading h2 .shop-heading-dot--red {
  color: var(--red);
}

.shop-section__heading h2 .shop-heading-dot--cyan {
  color: var(--cyan);
}

.shop-section__heading h2 .shop-heading-dot--amber {
  color: var(--amber);
}

.shop-section__heading > p:last-child {
  margin-bottom: 0;
  color: var(--body-text, #55586c);
  line-height: 1.7;
}

.shop-product-grid,
.shop-accessory-grid {
  display: grid;
  gap: 1rem;
}

.shop-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-product-grid--devices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-product-grid--plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-accessory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-product,
.shop-accessory {
  overflow: hidden;
  border: 1px solid var(--builder-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(31, 35, 82, 0.055);
}

.shop-product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
}

.shop-product--coming-soon,
.shop-accessory--coming-soon,
.shop-accessory--spare {
  background: #fbfbfc;
}

.shop-product--coming-soon > img {
  opacity: 0.62;
  filter: grayscale(0.68) saturate(0.42) sepia(0.08) hue-rotate(185deg);
}

.shop-accessory--coming-soon .shop-accessory__image {
  opacity: 1;
  filter: none;
}

.shop-product__launch-badge {
  position: absolute;
  z-index: 1;
  top: 1.75rem;
  left: 1.75rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.shop-product img,
.shop-accessory__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: #f7f7f8;
  object-fit: contain;
}

.shop-product--device > img {
  height: auto;
  aspect-ratio: 856 / 567;
  background: #fff;
  object-position: center;
}

.shop-product h3,
.shop-accessory h3 {
  margin: 1rem 0 0.4rem;
  color: var(--indigo);
  line-height: 1.3;
}

.shop-product p,
.shop-accessory p {
  color: var(--body-text, #5b5e72);
  line-height: 1.55;
}

.shop-product__price,
.shop-accessory__price {
  display: block;
  margin-top: auto;
  color: #171927;
  font-size: 1.4rem;
  font-weight: 820;
}

.shop-accessory .shop-accessory__price {
  color: var(--indigo);
}

.shop-accessory:not(.shop-accessory--case) .shop-accessory__body > .shop-accessory__price {
  align-self: flex-end;
  text-align: right;
}

.shop-product--device .shop-product__price {
  align-self: flex-end;
  color: var(--indigo);
  text-align: right;
}

.shop-product--coming-soon .shop-product__price,
.shop-accessory--coming-soon .shop-accessory__price {
  color: #707386;
  font-weight: 700;
}

.shop-product__price small {
  font-size: 0.78rem;
  font-weight: 650;
}

.shop-product .button,
.shop-accessory .button {
  width: 100%;
  justify-content: center;
  margin-top: 0.9rem;
}

.shop-product .button:disabled,
.shop-accessory .button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.shop-product--coming-soon .button,
.shop-accessory--coming-soon .button {
  margin-top: auto;
}

.shop-product-grid--devices .shop-product--coming-soon .button {
  margin-top: auto;
}

.shop-product .button--outline:disabled:hover,
.shop-accessory .button--outline:disabled:hover {
  background: transparent;
  color: var(--indigo-deep);
}

.shop-product__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--indigo) !important;
  font-size: 0.82rem;
  font-weight: 780;
}

.shop-product__label .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--indigo);
}

.shop-product__label--amber .fa-icon {
  background-color: var(--amber);
}

.shop-product__label--red .fa-icon {
  background-color: var(--red);
}

.shop-product__label--cyan .fa-icon {
  background-color: var(--cyan);
}

.shop-product__spec {
  margin: 0 0 0.75rem;
  color: var(--indigo) !important;
  font-weight: 680;
}

.shop-product__description {
  margin-top: 0;
}

.shop-product__availability,
.shop-accessory__availability {
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: 0;
  color: var(--indigo) !important;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-plan__icon,
.shop-service__icon,
.shop-route-card__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 14px;
  background: var(--indigo);
}

.shop-plan__icon .fa-icon,
.shop-service__icon .fa-icon,
.shop-route-card__icon .fa-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-color: #fff;
}

.shop-plan--empowered .shop-plan__icon {
  background: var(--red);
}

.shop-plan .shop-plan__icon--connected {
  display: block;
  width: 2.5rem;
  height: 1.65rem;
  color: var(--red);
  border-radius: 0;
  background: transparent;
  fill: currentColor;
}

.shop-plan .shop-plan__icon--empowered {
  display: block;
  width: 3rem;
  height: 2.25rem;
  border-radius: 0;
  background: var(--amber);
  -webkit-mask: url("../assets/brand/eletron-puzzle-diamond-pale-complete.png") center / contain no-repeat;
  mask: url("../assets/brand/eletron-puzzle-diamond-pale-complete.png") center / contain no-repeat;
}

.shop-plan__tagline {
  margin: 0 0 0.8rem;
  color: var(--indigo) !important;
  font-size: 0.92rem;
  font-weight: 760;
}

.shop-plan h3 {
  font-size: 1.35rem;
}

.shop-plan .shop-product__price {
  margin: 0 0 0.65rem;
  color: var(--indigo);
}

.shop-plan__summary {
  margin: 0 0 0.7rem;
  color: var(--indigo) !important;
  font-weight: 720;
}

.shop-plan__features {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.88rem;
  line-height: 1.55;
}

.shop-plan__features li + li {
  margin-top: 0.35rem;
}

.shop-plan .button {
  margin-top: auto;
}

.shop-plan-basket-note {
  margin: 0.8rem 0 1rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.84rem;
  line-height: 1.55;
}

.shop-accessory {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.shop-accessory__image {
  aspect-ratio: 1;
  padding: 0.35rem;
}

.shop-accessory__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.shop-accessory__body > p:not(.shop-accessory__price, .shop-accessory__note) {
  margin-top: 0;
}

.shop-accessory__body > .shop-accessory__availability {
  margin-top: auto;
}

.shop-accessory__note {
  margin: -0.15rem 0 0.75rem !important;
  color: var(--indigo) !important;
  font-size: 0.82rem;
  font-weight: 760;
}

.shop-accessory--case {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 0.75fr) minmax(360px, 1.55fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.shop-accessory--case .shop-accessory__image {
  height: auto;
  aspect-ratio: 1;
}

.shop-colours {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.shop-colours legend {
  margin: 0 0 0.8rem;
  padding: 0;
  color: var(--indigo);
  font-size: 1rem;
  font-weight: 700;
}

.shop-colours ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(48px, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-colours li {
  min-width: 0;
  color: var(--body-text, #5b5e72);
  font-size: 0.72rem;
  text-align: center;
}

.shop-colours label {
  display: block;
  border-radius: 12px;
  cursor: pointer;
}

.shop-colours input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.shop-colours label:has(input:focus-visible) {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.shop-colours label:has(input:checked) img {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo);
}

.shop-colours label:has(input:checked) span {
  color: var(--indigo);
  font-weight: 760;
}

.shop-colours span {
  display: block;
}

.shop-colours img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(74, 79, 158, 0.2);
  border-radius: 12px;
}

.shop-charger-colours {
  margin: 0.8rem 0 1rem;
  padding: 0;
  border: 0;
}

.shop-charger-colours legend {
  margin-bottom: 0.65rem;
  padding: 0;
  color: var(--indigo);
  font-size: 0.9rem;
  font-weight: 720;
}

.shop-charger-colours__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
}

.shop-charger-colours label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  color: var(--body-text, #5b5e72);
  font-size: 0.82rem;
  cursor: pointer;
}

.shop-charger-colours input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.shop-charger-colours__swatch {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  border: 2px solid var(--indigo);
  border-radius: 50%;
}

.shop-charger-colours__swatch--white {
  background: #fff;
}

.shop-charger-colours__swatch--black {
  background: #171927;
}

.shop-charger-colours label:has(input:focus-visible) {
  outline: 3px solid var(--amber);
  outline-offset: 4px;
}

.shop-charger-colours label:has(input:checked) {
  color: var(--indigo);
  font-weight: 760;
}

.shop-charger-colours label:has(input:checked) .shop-charger-colours__swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--indigo);
}

.shop-accessory__award {
  width: 82px;
  height: auto;
  margin: 0.2rem 0 0.9rem;
}

.shop-accessory__purchase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.shop-accessory__purchase-row .shop-accessory__price {
  align-self: center;
  margin: 0;
  line-height: 1;
}

.shop-accessory--headphones .shop-accessory__purchase-row {
  min-height: 2.45rem;
  align-items: center;
}

.shop-accessory--headphones.shop-accessory--coming-soon .button {
  margin-top: 0.9rem;
}

.shop-accessory--coming-soon .shop-accessory__price small {
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-specification-link {
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--indigo);
  border-radius: 50%;
  color: var(--indigo);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.shop-specification-link:hover {
  background: var(--indigo);
  color: #fff;
  transform: translateY(-2px);
}

.shop-specification-link .fa-icon {
  width: 0.82rem;
  height: 0.82rem;
  background-color: currentColor;
  transform: rotate(-45deg);
}

.shop-specification-link--dialog {
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.shop-specification-link--dialog .fa-icon {
  transform: none;
}

.shop-accessory--price-aligned .shop-accessory__purchase-row,
.shop-accessory__purchase-row--price-only {
  min-height: 2.45rem;
  justify-content: flex-end;
}

.shop-accessory--price-aligned.shop-accessory--coming-soon .button {
  margin-top: 0.9rem;
}

.product-spec-dialog {
  width: min(900px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
}

body.product-spec-dialog-open {
  overflow: hidden;
}

.product-spec-dialog::backdrop {
  background: rgba(21, 23, 39, 0.66);
  backdrop-filter: blur(2px);
}

.product-spec-dialog__surface {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 2px solid var(--cyan);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(21, 23, 39, 0.28);
}

.product-spec-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.product-spec-dialog__header .eyebrow {
  margin-bottom: 0.35rem;
  color: var(--red);
}

.product-spec-dialog__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.1;
}

.product-spec-dialog__header h2 span {
  color: var(--cyan);
}

.product-spec-dialog__close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.24);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.product-spec-dialog__close .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--indigo);
}

.product-spec-dialog__content {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 1.25rem;
}

.product-spec-dialog__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.product-spec-dialog__content p {
  margin: 0;
  color: var(--body-text, #5b5e72);
  line-height: 1.6;
}

.product-spec-dialog__content ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  color: var(--body-text, #5b5e72);
}

.product-spec-dialog__content li {
  margin-top: 0.55rem;
  line-height: 1.5;
}

.product-spec-dialog__content li::marker {
  color: var(--amber);
}

html[data-display-mode="calm"] .product-spec-dialog__surface {
  background: var(--surface-warm, #f4efe5);
  box-shadow: none;
}

html[data-display-mode="calm"] .product-spec-dialog__content img {
  filter: saturate(0.58) contrast(0.92) brightness(0.98);
}

@media (max-width: 680px) {
  .product-spec-dialog {
    width: min(100% - 1rem, 900px);
  }

  .product-spec-dialog__content {
    grid-template-columns: 1fr;
  }

  .product-spec-dialog__content img {
    width: min(100%, 360px);
    justify-self: center;
  }
}

.product-interest-dialog {
  width: min(760px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
}

body.product-interest-dialog-open {
  overflow: hidden;
}

.product-interest-dialog::backdrop {
  background: rgba(21, 23, 39, 0.68);
  backdrop-filter: blur(2px);
}

.product-interest-dialog__surface {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 2px solid var(--cyan);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(21, 23, 39, 0.28);
}

.product-interest-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.product-interest-dialog__header .eyebrow {
  margin-bottom: 0.35rem;
  color: var(--red);
}

.product-interest-dialog__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.1;
}

.product-interest-dialog__header h2 > span:last-child {
  color: var(--cyan);
}

.product-interest-dialog__close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.24);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.product-interest-dialog__close .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--indigo);
}

.product-interest-dialog__intro {
  max-width: 63ch;
  margin: 0.9rem 0 0;
  color: var(--body-text, #5b5e72);
  line-height: 1.6;
}

.product-interest-dialog__form {
  margin-top: 1.25rem;
}

.product-interest-dialog__form .contact-form__grid {
  gap: 1rem 1.15rem;
}

.product-interest-dialog__form .form-field textarea {
  min-height: 118px;
}

.product-interest-dialog__privacy {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.product-interest-dialog__privacy a {
  color: var(--indigo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.17em;
}

.product-interest-dialog__status {
  margin: 1rem 0 0;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(232, 64, 64, 0.09);
  color: #a11919;
  font-weight: 700;
  line-height: 1.5;
}

.product-interest-dialog__submit {
  min-width: 13rem;
  margin-top: 1.15rem;
  justify-content: center;
}

.product-interest-dialog__submit[aria-busy="true"] {
  cursor: wait;
  opacity: 0.75;
}

.product-interest-dialog__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.product-interest-dialog__success {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border-radius: var(--radius-md);
  background: rgba(89, 194, 222, 0.13);
  text-align: center;
}

.product-interest-dialog__success[hidden] {
  display: none;
}

.product-interest-dialog__success-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
}

.product-interest-dialog__success-icon .fa-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-color: #fff;
}

.product-interest-dialog__success p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.6;
}

.product-interest-dialog__success .button {
  min-width: 10rem;
  justify-content: center;
}

html[data-display-mode="calm"] .product-interest-dialog__surface,
html[data-display-mode="calm"] .product-interest-dialog__close {
  background: var(--builder-surface, #f4efe5);
  box-shadow: none;
}

@media (max-width: 680px) {
  .product-interest-dialog {
    width: min(100% - 1rem, 760px);
  }

  .product-interest-dialog__form .contact-form__grid {
    grid-template-columns: 1fr;
  }

  .product-interest-dialog__submit {
    width: 100%;
  }
}

.shop-accessory__image--compatibility {
  display: grid;
  place-items: center;
  background: rgba(89, 194, 222, 0.12);
}

.shop-accessory__image--compatibility > span {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--indigo);
}

.shop-accessory__image--compatibility .fa-icon {
  width: 1.8rem;
  height: 1.8rem;
  background-color: #fff;
}

.shop-accessory--compatibility .shop-accessory__body > p:last-of-type {
  min-height: 3.57rem;
  margin-top: auto;
  margin-bottom: 0;
  font-size: 0.86rem;
}

.shop-accessory--compatibility .button {
  width: 100%;
  min-height: 48px;
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.6;
}

.shop-headphone-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0;
  color: var(--body-text, #55586c);
  font-size: 0.82rem;
}

.shop-headphone-note .fa-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.1rem;
  background-color: var(--cyan);
}

.shop-details {
  margin-top: 1rem;
}

.product-details__box.shop-product-details__box {
  grid-template-columns: minmax(180px, 420px) minmax(0, 1fr);
  align-items: start;
}

.shop-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.shop-detail-grid .shop-details {
  margin-top: 0;
}

.shop-box-contents {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(74, 79, 158, 0.14);
}

.shop-box-contents img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.shop-box-contents h3 {
  margin-top: 0;
  color: var(--indigo);
}

.shop-specification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.shop-specification-grid section {
  padding: 1rem;
  border: 1px solid rgba(74, 79, 158, 0.14);
  border-radius: 14px;
}

.shop-specification-grid h3 {
  margin: 0 0 0.7rem;
  color: var(--indigo);
  font-size: 1rem;
}

.shop-specification-grid dl,
.shop-specification-grid dd {
  margin: 0;
}

.shop-specification-grid dl > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.4fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-top: 1px solid rgba(74, 79, 158, 0.1);
}

.shop-specification-grid dl > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.shop-specification-grid dt {
  color: var(--indigo);
  font-weight: 720;
}

.shop-specification-grid dd {
  color: var(--body-text, #5b5e72);
  line-height: 1.55;
}

.shop-specification-grid__wide {
  grid-column: 1 / -1;
}

.shop-service-grid,
.shop-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.shop-service,
.shop-route-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--builder-border);
  border-radius: 20px;
  background: #fff;
}

.shop-service {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-color: rgba(100, 104, 123, 0.28);
}

.shop-service h3,
.shop-route-card h3 {
  margin: 0 0 0.5rem;
  color: var(--indigo);
}

.shop-service__heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(100, 104, 123, 0.2);
  background: var(--surface-soft);
}

.shop-service__heading > div {
  min-width: 0;
}

.shop-service__heading .shop-service__icon {
  flex: 0 0 auto;
}

.shop-service__heading .shop-service__icon--cyan {
  background: var(--cyan);
}

.shop-service__heading h3 {
  margin-bottom: 0.16rem;
}

.shop-service__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 1.25rem 1.25rem;
}

.shop-service p,
.shop-service li,
.shop-route-card p {
  color: var(--body-text, #55586c);
  line-height: 1.6;
}

.shop-service--insurance li {
  font-size: 0.88rem;
}

.shop-service--insurance .shop-service__body > p:first-child {
  margin-bottom: 0;
}

.shop-service--insurance ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.65rem 0 1rem;
  padding-left: 1.45rem;
}

.shop-service__status,
.shop-service__eligibility {
  color: var(--indigo) !important;
  font-size: 0.78rem;
  font-weight: 760;
}

.shop-service__status {
  margin: 0;
  color: var(--indigo) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shop-service__eligibility {
  margin-top: 0.35rem;
}

.shop-service .button {
  width: fit-content;
  min-height: 38px;
  align-self: flex-end;
  margin-top: auto;
  padding: 0.5rem 0.85rem;
  border-color: var(--muted);
  color: var(--muted);
  font-size: 0.8rem;
}

.shop-service .button:hover {
  border-color: var(--muted);
  background: var(--muted);
  color: #fff;
}

.shop-route-card {
  display: flex;
  flex-direction: column;
}

.shop-route-card .button {
  margin-top: auto;
}

.shop-route-card--founder {
  border-color: rgba(245, 171, 31, 0.7);
  background: rgba(245, 171, 31, 0.09);
}

.shop-route-card--founder .shop-route-card__icon {
  background: var(--amber);
}

.shop-route-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shop-route-card__top > span:last-child {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(89, 194, 222, 0.18);
  color: var(--indigo);
  font-size: 0.72rem;
  font-weight: 780;
}

.shop-footer-cta {
  border-color: var(--line);
  background: var(--surface);
}

.shop-footer-cta__inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-footer-cta .eyebrow {
  color: var(--red);
}

.shop-footer-cta h2 {
  color: var(--indigo);
}

.shop-footer-cta h2 span {
  color: var(--cyan);
}

.shop-footer-cta__action {
  display: flex;
  justify-content: flex-end;
}

.shop-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-block: 2rem clamp(4rem, 7vw, 6rem);
  padding: 1.4rem;
  border: 1px solid rgba(74, 79, 158, 0.35);
  border-radius: 18px;
  background: #fff;
}

.shop-note p {
  max-width: 750px;
  margin: 0;
  color: var(--body-text, #525568);
  line-height: 1.65;
}

.shop-basket-shortcut {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2rem);
  bottom: clamp(0.9rem, 2.5vw, 2rem);
  z-index: 95;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 12px 28px rgba(31, 35, 82, 0.26);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.shop-basket-shortcut:hover {
  background: var(--indigo-deep, #343978);
  transform: translateY(-2px);
}

.shop-basket-shortcut:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.shop-basket-shortcut .fa-icon {
  width: 1.1rem;
  height: 1.1rem;
  background-color: #fff;
}

.shop-basket-shortcut__count {
  display: inline-grid;
  min-width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  margin-left: 0.25rem;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: var(--amber);
  color: #171927;
  font-size: 0.78rem;
}

.shop-basket-shortcut > strong {
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

body.shop-basket-open {
  overflow: hidden;
}

body.shop-basket-open .shop-basket-shortcut {
  visibility: hidden;
}

.shop-basket {
  inset: 0 0 0 auto;
  width: min(480px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--body-text, #4f5268);
}

.shop-basket::backdrop {
  background: rgba(22, 24, 50, 0.58);
  backdrop-filter: blur(2px);
}

.shop-basket__surface {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: #fff;
  box-shadow: -18px 0 45px rgba(25, 29, 73, 0.2);
}

.shop-basket__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.shop-basket__header .eyebrow {
  margin-bottom: 0.35rem;
}

.shop-basket__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.08;
}

.shop-basket__header h2 span {
  color: var(--red);
}

.shop-basket__close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.24);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.shop-basket__close .fa-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--indigo);
}

.shop-basket__intro,
.shop-basket__empty,
.shop-basket__checkout-note {
  color: var(--body-text, #55586c);
  line-height: 1.6;
}

.shop-basket__intro {
  margin: 1rem 0;
}

.shop-basket__accessory-note {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--builder-soft);
  color: var(--body-text, #55586c);
  font-size: 0.82rem;
  line-height: 1.55;
}

.shop-basket__empty {
  padding: 1rem;
  border-radius: 14px;
  background: var(--builder-soft);
}

.shop-basket__items {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-basket-item {
  padding: 1rem;
  border: 1px solid rgba(74, 79, 158, 0.18);
  border-radius: 16px;
  background: #fff;
}

.shop-basket-item__top,
.shop-basket-item__controls,
.shop-basket-item__quantity {
  display: flex;
  align-items: center;
}

.shop-basket-item__top {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.shop-basket-item h3 {
  margin: 0;
  color: var(--indigo);
  font-size: 1rem;
  line-height: 1.35;
}

.shop-basket-item__variant {
  display: block;
  margin-top: 0.2rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.8rem;
}

.shop-basket-item__unit-price {
  color: var(--indigo);
  font-size: 0.82rem;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

.shop-basket-item__controls {
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.shop-basket-item__quantity {
  gap: 0.25rem;
}

.shop-basket-item__quantity button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.28);
  border-radius: 50%;
  background: #fff;
  color: var(--indigo);
  cursor: pointer;
}

.shop-basket-item__quantity button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shop-basket-item__quantity .fa-icon {
  width: 0.7rem;
  height: 0.7rem;
  background-color: currentColor;
}

.shop-basket-item__quantity output {
  min-width: 2.2rem;
  color: var(--indigo);
  font-weight: 780;
  text-align: center;
}

.shop-basket-item__quantity--linked {
  color: var(--body-text, #5b5e72);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.shop-basket-item__remove {
  min-height: 44px;
  padding: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--indigo);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.shop-basket__route {
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border: 0;
  border-top: 2px solid rgba(74, 79, 158, 0.24);
}

.shop-basket__route > legend {
  margin-bottom: 0.8rem;
  padding: 0;
  color: var(--indigo);
  font-weight: 780;
}

.shop-basket__route-options {
  display: grid;
  gap: 0.75rem;
}

.shop-basket__route-card {
  min-height: 0;
  padding: 1rem 3.2rem 1rem 1rem;
  border-width: 2px;
  border-color: rgba(74, 79, 158, 0.38);
  background: rgba(74, 79, 158, 0.04);
}

.shop-basket__route-card--founder {
  border-color: rgba(245, 171, 31, 0.68);
  background: rgba(245, 171, 31, 0.07);
}

.shop-basket__route-card--founder:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245, 171, 31, 0.14);
  box-shadow: 0 0 0 3px rgba(245, 171, 31, 0.18);
}

.shop-basket__route-card-top {
  display: flex;
  min-height: 2.55rem;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
}

.shop-basket__route-icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--indigo);
}

.shop-basket__route-card--founder .shop-basket__route-icon {
  background: var(--amber);
}

.shop-basket__route-icon .fa-icon {
  width: 1.05rem;
  height: 1.05rem;
  background-color: #fff;
}

.shop-basket__route-badge {
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(89, 194, 222, 0.18);
  color: var(--indigo);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.25;
}

.shop-basket__route-card > strong {
  color: var(--indigo);
  font-size: 1rem;
  line-height: 1.35;
}

.shop-basket__route-card > span:last-child {
  font-size: 0.82rem;
}

.shop-basket__route-information {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--builder-soft);
  color: var(--body-text, #55586c);
  font-size: 0.8rem;
  line-height: 1.55;
}

.shop-basket__route-information p {
  margin: 0;
}

.shop-basket__route-information a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  color: var(--indigo);
  font-weight: 760;
  text-underline-offset: 0.2em;
}

.shop-basket__route-information a .fa-icon {
  width: 0.8rem;
  height: 0.8rem;
  background-color: currentColor;
}

.shop-basket__summary {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(74, 79, 158, 0.24);
}

.shop-basket__summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.shop-basket__summary > div > strong {
  color: var(--indigo);
  white-space: nowrap;
}

.shop-basket__summary .shop-basket__saving {
  padding: 0.65rem;
  border-radius: 10px;
  background: rgba(89, 194, 222, 0.13);
  font-size: 0.84rem;
}

.shop-basket__summary .shop-basket__saving--founder {
  background: rgba(245, 171, 31, 0.16);
}

.shop-basket__total {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(74, 79, 158, 0.18);
  font-weight: 780;
}

.shop-basket__total strong {
  font-size: 1.45rem;
}

.shop-basket__monthly {
  color: var(--indigo);
  font-weight: 720;
}

.shop-basket__summary > p {
  margin: 0.25rem 0 0;
  color: var(--body-text, #5b5e72);
  font-size: 0.78rem;
  line-height: 1.5;
}

.shop-basket__payments {
  display: grid;
  justify-items: end;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.25rem;
  text-align: right;
}

.shop-basket__payments p {
  margin: 0;
  color: var(--body-text, #5b5e72);
  font-size: 0.74rem;
  line-height: 1.4;
}

.shop-basket__payment-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.shop-basket__payment-marks img {
  display: block;
  width: auto;
  height: 24px;
  object-fit: contain;
}

.shop-basket__payment-marks img[alt="Visa"],
.shop-basket__payment-marks img[alt="Mastercard"],
.shop-basket__payment-marks img[alt="PayPal"] {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.shop-basket__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  margin-top: 0;
  padding-top: 0.75rem;
}

.shop-basket__actions .button {
  justify-content: center;
}

.shop-basket__actions .button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.shop-basket__checkout-note {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  text-align: right;
}

html[data-display-mode="calm"] .shop-guided-card,
html[data-display-mode="calm"] .shop-basket__surface,
html[data-display-mode="calm"] .shop-basket-item,
html[data-display-mode="calm"] .shop-basket__close,
html[data-display-mode="calm"] .shop-basket-item__quantity button,
html[data-display-mode="calm"] .shop-basket__route-card,
html[data-display-mode="calm"] .shop-basket__route-card--founder:has(input:checked) {
  background: var(--builder-surface, #f4efe5);
  box-shadow: none;
}

html[data-display-mode="calm"] .shop-footer-cta {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .shop-accessory__image--compatibility {
  background: var(--builder-soft, #e9e3d7);
}

html[data-display-mode="calm"] .shop-basket__empty {
  background: var(--builder-soft, #e9e3d7);
}

html[data-display-mode="calm"] .shop-basket__route-information {
  background: var(--builder-soft, #e9e3d7);
}

/* Font Awesome aliases used by the package builder */
.fa-icon--basket-shopping { --fa-icon: url("../assets/icons/font-awesome/basket-shopping.svg"); }
.fa-icon--list-check { --fa-icon: url("../assets/icons/font-awesome/list-check.svg"); }
.fa-icon--sliders { --fa-icon: url("../assets/icons/font-awesome/sliders.svg"); }
.fa-icon--universal-access { --fa-icon: url("../assets/icons/font-awesome/universal-access.svg"); }
.fa-icon--wifi { --fa-icon: url("../assets/icons/font-awesome/wifi.svg"); }
.fa-icon--mobile-screen-button { --fa-icon: url("../assets/icons/font-awesome/mobile-screen-button.svg"); }
.fa-icon--clock { --fa-icon: url("../assets/icons/font-awesome/clock.svg"); }
.fa-icon--plus { --fa-icon: url("../assets/icons/font-awesome/plus.svg"); }
.fa-icon--info { --fa-icon: url("../assets/icons/font-awesome/circle-info.svg"); }
.fa-icon--arrow-rotate-right { --fa-icon: url("../assets/icons/font-awesome/arrow-rotate-right.svg"); }
.fa-icon--check { --fa-icon: url("../assets/icons/font-awesome/circle-check.svg"); }
.fa-icon--arrow-down { --fa-icon: url("../assets/icons/font-awesome/arrow-right.svg"); transform: rotate(90deg); }
.fa-icon--arrow-left { --fa-icon: url("../assets/icons/font-awesome/arrow-right.svg"); transform: rotate(180deg); }
.fa-icon--box-open { --fa-icon: url("../assets/icons/font-awesome/layer-group.svg"); }
.fa-icon--sterling-sign { --fa-icon: url("../assets/icons/font-awesome/chart-line.svg"); }
.fa-icon--signal { --fa-icon: url("../assets/icons/font-awesome/wifi.svg"); }
.fa-icon--gamepad { --fa-icon: url("../assets/icons/font-awesome/gamepad.svg"); }
.fa-icon--bookmark { --fa-icon: url("../assets/icons/font-awesome/circle-check.svg"); }
.fa-icon--heart { --fa-icon: url("../assets/icons/font-awesome/hands-holding-child.svg"); }
.fa-icon--lock { --fa-icon: url("../assets/icons/font-awesome/shield-halved.svg"); }
.fa-icon--sim-card { --fa-icon: url("../assets/icons/font-awesome/mobile-screen-button.svg"); }
.fa-icon--tag { --fa-icon: url("../assets/icons/font-awesome/circle-check.svg"); }
.fa-icon--people-group { --fa-icon: url("../assets/icons/font-awesome/user-gear.svg"); }
.fa-icon--cloud-arrow-up { --fa-icon: url("../assets/icons/font-awesome/cloud.svg"); }
.fa-icon--circle-info { --fa-icon: url("../assets/icons/font-awesome/comment-dots.svg"); }
.fa-icon--shapes { --fa-icon: url("../assets/icons/font-awesome/layer-group.svg"); }
.fa-icon--shield-halved { --fa-icon: url("../assets/icons/font-awesome/shield-halved.svg"); }
.fa-icon--tablet-screen-button { --fa-icon: url("../assets/icons/font-awesome/tablet-screen-button.svg"); }
.fa-icon--headphones { --fa-icon: url("../assets/icons/font-awesome/headphones.svg"); }
.fa-icon--hands-holding-child { --fa-icon: url("../assets/icons/font-awesome/hands-holding-child.svg"); }
.fa-icon--user-gear { --fa-icon: url("../assets/icons/font-awesome/user-gear.svg"); }
.fa-icon--envelope { --fa-icon: url("../assets/icons/font-awesome/envelope.svg"); }
.fa-icon--camera { --fa-icon: url("../assets/icons/font-awesome/camera.svg"); }
.fa-icon--layer-group { --fa-icon: url("../assets/icons/font-awesome/layer-group.svg"); }
.fa-icon--location-dot { --fa-icon: url("../assets/icons/font-awesome/location-dot.svg"); }

html[data-display-mode="calm"] .get-eletron-page,
html[data-display-mode="calm"] .shop-page {
  --builder-border: rgba(85, 91, 130, 0.34);
  --builder-surface: #f1ecdf;
  --builder-soft: #e7e1d4;
}

html[data-display-mode="calm"] .package-intro {
  background: var(--surface-warm, #e9e3d7);
}

html[data-display-mode="calm"] .package-intro__visual > img,
html[data-display-mode="calm"] .shop-product img,
html[data-display-mode="calm"] .shop-accessory__image,
html[data-display-mode="calm"] .accessory-card__image img,
html[data-display-mode="calm"] .trust-logo {
  filter: saturate(0.58) contrast(0.92) brightness(0.98);
}

html[data-display-mode="calm"] .package-builder-section,
html[data-display-mode="calm"] .shop-catalogue {
  background: var(--page-background, #ded7c9);
}

html[data-display-mode="calm"] .shop-intro {
  background:
    radial-gradient(circle at 98% 9%, rgba(89, 194, 222, 0.09) 0 10.5rem, transparent 10.6rem),
    radial-gradient(circle at 5% 92%, rgba(245, 171, 31, 0.1) 0 9rem, transparent 9.1rem),
    linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
}

/* Package builder shell: panel content is added one step at a time. */
.package-builder-shell__frame {
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: #fff;
  border: 1px solid rgba(74, 79, 158, 0.18);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(31, 35, 82, 0.09);
}

.package-builder-shell [hidden] {
  display: none !important;
}

.package-builder-shell .builder-progress ol {
  gap: clamp(0.25rem, 1vw, 0.65rem);
}

.package-builder-shell .builder-progress li {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

.package-builder-shell .builder-progress__step {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.35rem;
  border: 0;
  border-radius: inherit;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.package-builder-shell .builder-progress__step:disabled,
.package-builder-shell .builder-progress li[aria-current="step"] .builder-progress__step {
  cursor: default;
}

.package-builder-shell .builder-progress__step:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: -3px;
}

.package-builder-shell .builder-progress li.is-available {
  color: var(--indigo);
  background: rgba(74, 79, 158, 0.08);
}

.package-builder-shell .builder-progress li.is-available:hover {
  background: rgba(74, 79, 158, 0.14);
}

.package-builder-shell .builder-progress__step strong {
  font: inherit;
  line-height: 1.2;
}

.package-builder-shell .builder-progress__step > .builder-progress__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: rgba(74, 79, 158, 0.09);
}

.package-builder-shell .builder-progress__icon::before {
  width: 1.08rem;
  height: 1.08rem;
  background: currentColor;
  content: "";
  -webkit-mask: var(--builder-step-icon) center / contain no-repeat;
  mask: var(--builder-step-icon) center / contain no-repeat;
}

.package-builder-shell .builder-progress__icon--device {
  --builder-step-icon: url("../assets/icons/font-awesome/tablet-screen-button.svg");
}

.package-builder-shell .builder-progress__icon--support {
  --builder-step-icon: url("../assets/icons/font-awesome/mobile-screen-button.svg");
}

.package-builder-shell .builder-progress__icon--accessories {
  --builder-step-icon: url("../assets/icons/font-awesome/headphones.svg");
}

.package-builder-shell .builder-progress__icon--future {
  --builder-step-icon: url("../assets/icons/font-awesome/bell.svg");
}

.package-builder-shell .builder-progress__icon--review {
  --builder-step-icon: url("../assets/icons/font-awesome/list-check.svg");
}

.package-builder-shell .builder-progress li[aria-current="step"] .builder-progress__icon {
  background: rgba(255, 255, 255, 0.16);
}

.package-builder-shell .builder-progress li.is-complete .builder-progress__icon,
.package-builder-shell .builder-progress li.is-available .builder-progress__icon {
  background: rgba(74, 79, 158, 0.13);
}

.package-builder-shell__panel {
  min-height: clamp(220px, 25vw, 320px);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid rgba(74, 79, 158, 0.18);
  border-radius: 20px;
}

.package-builder-shell__step-heading > span {
  display: block;
  color: var(--eyebrow-dark, #343985);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.package-builder-shell__step-heading h3 {
  margin: 0.35rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.package-builder-shell__step-heading h3 > span {
  color: var(--cyan);
}

.package-builder-shell__step-heading > p {
  max-width: 68ch;
  margin: 0.75rem 0 0;
  color: var(--body-text, #5b5e72);
  line-height: 1.65;
}

.package-builder-shell__workspace {
  min-width: 0;
}

.package-builder-shell__layout {
  scroll-margin-top: calc(var(--header-sticky-offset, 96px) + 1rem);
}

.builder-device-intro {
  display: grid;
  grid-template-columns: minmax(150px, 0.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 1.35rem);
  margin: 1.7rem 0;
  padding: clamp(0.8rem, 1.8vw, 1rem);
  border-radius: 18px;
  background: var(--builder-soft);
}

.builder-device-intro__visual {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.builder-device-intro__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 24% 50%;
}

.builder-device-intro__copy h4 {
  margin: 0 0 0.65rem;
  color: var(--indigo);
  font-size: clamp(1.12rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.builder-device-intro__copy h4 > span {
  color: var(--red);
}

.builder-device-intro__copy > p:last-child {
  margin: 0;
  color: var(--body-text, #5b5e72);
  font-size: 0.88rem;
  line-height: 1.55;
}

.package-builder-shell .device-card {
  min-height: 300px;
  border-width: 2px;
  border-color: rgba(74, 79, 158, 0.55);
  background: rgba(74, 79, 158, 0.06);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.09);
}

.package-builder-shell .device-card:hover {
  border-color: var(--indigo);
  box-shadow: 0 8px 20px rgba(41, 45, 103, 0.12);
}

.package-builder-shell .device-card:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245, 171, 31, 0.16);
  box-shadow: 0 0 0 4px rgba(245, 171, 31, 0.22);
}

.package-builder-shell .device-card--coming-soon {
  border-color: rgba(74, 79, 158, 0.24);
  background: rgba(74, 79, 158, 0.035);
  box-shadow: none;
  cursor: not-allowed;
}

.package-builder-shell .device-card--coming-soon > :not(.device-card__availability) {
  opacity: 0.68;
}

.package-builder-shell .device-card--coming-soon:hover {
  border-color: rgba(74, 79, 158, 0.24);
  box-shadow: none;
}

.package-builder-shell .device-card__price--muted {
  color: rgba(74, 79, 158, 0.58);
}

.package-builder-shell .device-card > .device-card__availability {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  color: var(--indigo);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.package-builder-shell .device-card > strong {
  padding-right: 1.8rem;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.35;
}

.package-builder-shell .device-card__model {
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.package-builder-shell .device-card__description {
  margin-top: 0.8rem;
}

.package-builder-shell .device-card > .device-card__price {
  margin-top: auto;
  padding-top: 1rem;
  align-self: flex-end;
  color: var(--indigo);
  font-size: clamp(1.35rem, 1.8vw, 1.5rem);
  line-height: 1;
  text-align: right;
}

.package-builder-shell .device-card > .device-card__price--coming-soon,
.package-builder-shell .accessory-card__price--coming-soon {
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.support-choice-fieldset {
  margin-top: 1.7rem;
}

.package-builder-shell .support-choice-card {
  min-height: 240px;
  border-width: 2px;
  border-color: rgba(74, 79, 158, 0.45);
  background: rgba(74, 79, 158, 0.05);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.07);
}

.package-builder-shell .support-choice-card:hover {
  border-color: var(--indigo);
  box-shadow: 0 8px 20px rgba(41, 45, 103, 0.12);
}

.package-builder-shell .support-choice-card:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245, 171, 31, 0.16);
  box-shadow: 0 0 0 4px rgba(245, 171, 31, 0.22);
}

.package-builder-shell .support-choice-card > strong {
  padding-right: 1.8rem;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.35;
}

.package-builder-shell .support-choice-card .plan-card__price {
  margin-top: 0.45rem;
  color: var(--indigo);
  font-size: 1.45rem;
  line-height: 1.15;
}

.package-builder-shell .support-choice-card .plan-card__price small {
  font-size: 0.78rem;
  font-weight: 680;
}

.package-builder-shell .support-choice-card.plan-card--empowered .plan-card__icon {
  background: var(--red);
}

.support-choice-card__description {
  margin-top: 0.8rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.88rem;
  line-height: 1.55;
}

.support-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.8rem;
  margin-top: 1.35rem;
}

.support-detail-grid .package-builder-shell__details {
  margin-top: 0;
}

.support-plan-details ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.86rem;
  line-height: 1.6;
}

.support-plan-details li + li {
  margin-top: 0.32rem;
}

.support-plan-saving {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-left: 0;
  border-radius: 12px;
}

.support-plan-saving .fa-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  flex: 0 0 auto;
  background-color: var(--indigo);
}

.support-plan-saving p {
  margin: 0;
}

.accessory-choice-fieldset {
  margin-top: 1.35rem;
}

.package-builder-shell .accessory-grid {
  align-items: stretch;
}

.builder-accessory-group-heading {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-top: 0.35rem;
  padding: 0.25rem 0.1rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.84rem;
  line-height: 1.45;
}

.builder-accessory-group-heading strong {
  color: var(--indigo);
  font-size: 1rem;
}

.package-builder-shell .accessory-card--case,
.package-builder-shell .headphone-choice {
  grid-column: 1 / -1;
}

.package-builder-shell .accessory-card--case.is-expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  align-items: stretch;
}

.package-builder-shell .accessory-card--case.is-expanded .case-colours {
  align-self: center;
  margin: 1rem 1rem 1rem 0;
}

.package-builder-shell .accessory-card {
  position: relative;
  border-width: 2px;
  border-color: rgba(74, 79, 158, 0.42);
  background: rgba(74, 79, 158, 0.045);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.065);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.package-builder-shell .accessory-card:hover {
  border-color: var(--indigo);
  box-shadow: 0 8px 20px rgba(41, 45, 103, 0.12);
}

.package-builder-shell .accessory-card:has(> label > input:checked) {
  border-color: var(--amber);
  background: rgba(245, 171, 31, 0.14);
  box-shadow: 0 0 0 4px rgba(245, 171, 31, 0.2);
}

.package-builder-shell .accessory-card--coming-soon {
  border-color: rgba(74, 79, 158, 0.22);
  background: rgba(74, 79, 158, 0.03);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.68;
}

.package-builder-shell .accessory-card--coming-soon:hover {
  border-color: rgba(74, 79, 158, 0.22);
  box-shadow: none;
}

.package-builder-shell .accessory-card > label {
  grid-template-columns: 124px minmax(0, 1fr);
  height: 100%;
  min-height: 156px;
}

.package-builder-shell .accessory-card--case > label {
  min-height: 156px;
}

.package-builder-shell .accessory-card > label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.package-builder-shell .accessory-card .select-card__check {
  z-index: 1;
}

.package-builder-shell .accessory-card:has(> label > input:checked) .select-card__check {
  border-color: var(--indigo);
  background: var(--indigo);
  opacity: 1;
}

.package-builder-shell .accessory-card:has(> label > input:checked) .select-card__check .fa-icon {
  background-color: #fff;
}

.package-builder-shell .accessory-card__image {
  width: 124px;
  height: 124px;
}

.accessory-card__body {
  display: flex;
  min-width: 0;
  min-height: 124px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.package-builder-shell .accessory-card__body > strong {
  padding-right: 1.5rem;
  font-size: 0.98rem;
}

.package-builder-shell .accessory-card__body > .accessory-card__price {
  margin-top: auto;
  padding-top: 0.7rem;
  align-self: flex-end;
  color: var(--indigo);
  line-height: 1;
  text-align: right;
}

.package-builder-shell .accessory-card--charger {
  grid-column: auto;
}

.package-builder-shell .accessory-card--charger.is-expanded {
  display: block;
}

.package-builder-shell .accessory-card--charger.is-expanded .builder-charger-colours {
  position: absolute;
  z-index: 2;
  top: 3.7rem;
  right: 2.5rem;
  left: 156px;
  margin: 0;
}

.package-builder-shell .builder-charger-colours legend {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}

.package-builder-shell .builder-charger-colours .shop-charger-colours__options {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.3rem;
}

.package-builder-shell .builder-charger-colours label {
  min-width: 5.5rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(74, 79, 158, 0.34);
  background: #fff;
  font-size: 0.76rem;
}

.package-builder-shell .builder-charger-colours .shop-charger-colours__swatch {
  width: 1.05rem;
  height: 1.05rem;
  flex-basis: 1.05rem;
  border-width: 1px;
}

.package-builder-shell .builder-charger-colours label:has(input:checked) {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px rgba(74, 79, 158, 0.12);
}

.package-builder-shell .accessory-card__note {
  margin-top: 0.35rem;
}

.package-builder-shell .accessory-card__note--protection {
  max-width: 29ch;
  font-size: 0.82rem;
  line-height: 1.4;
}

.package-builder-shell .accessory-card__footer {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: 0.55rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.package-builder-shell .accessory-card__footer .accessory-card__price {
  margin: 0;
  padding: 0;
  color: var(--indigo);
  line-height: 1;
  text-align: left;
}

.package-builder-shell .headphone-choice__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.package-builder-shell .trust-logo--what-hifi {
  max-width: 44px;
  max-height: 25px;
  margin: 0;
  border-radius: 0;
}

.accessory-plan-saving {
  margin-top: 1.35rem;
}

.package-builder-shell .future-service-list {
  margin-top: 1.35rem;
}

.package-builder-shell .future-service {
  align-items: start;
  border-width: 2px;
  border-color: rgba(74, 79, 158, 0.42);
  background: rgba(74, 79, 158, 0.045);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.065);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.package-builder-shell .future-service:hover {
  border-color: var(--indigo);
  box-shadow: 0 8px 20px rgba(41, 45, 103, 0.12);
}

.package-builder-shell .future-service:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245, 171, 31, 0.14);
  box-shadow: 0 0 0 4px rgba(245, 171, 31, 0.2);
}

.package-builder-shell .future-service__copy {
  min-width: 0;
}

.package-builder-shell .future-service--mobile .future-service__icon {
  background: var(--cyan);
}

.package-builder-shell .future-service--mobile .future-service__icon .fa-icon {
  background-color: #fff;
}

.package-builder-shell .future-service__benefits {
  display: grid;
  grid-column: 2 / -1;
  gap: 0.35rem;
  margin: 0;
  padding: 0.85rem 1rem 0.85rem 1.2rem;
  border-top: 1px solid rgba(74, 79, 158, 0.14);
  color: var(--body-text, #5b5e72);
  font-size: 0.82rem;
  line-height: 1.5;
}

.package-builder-shell .future-service__benefits li::marker {
  color: var(--cyan);
}

.package-builder-shell .future-service__eligibility {
  display: block;
  margin-top: 0.45rem;
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.45;
}

.package-builder-shell .future-service.is-disabled {
  border-color: rgba(74, 79, 158, 0.2);
  background: var(--builder-soft);
  box-shadow: none;
}

.package-builder-shell .future-service.is-disabled:hover {
  border-color: rgba(74, 79, 158, 0.2);
  box-shadow: none;
}

.package-builder-shell .future-service.is-disabled > label {
  cursor: not-allowed;
}

.package-summary__future {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border-radius: 11px;
  background: rgba(89, 194, 222, 0.13);
  color: var(--body-text, #5b5e72);
  font-size: 0.8rem;
  line-height: 1.45;
}

.package-summary__future p {
  margin: 0;
  color: var(--indigo);
  font-weight: 760;
}

.package-summary__future ul {
  display: grid;
  gap: 0.25rem;
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.package-summary__future li::marker {
  color: var(--cyan);
}

.package-builder-shell .future-service-note p {
  font-size: 0.94rem;
  line-height: 1.65;
}

.package-final-review {
  margin-top: 1.35rem;
  padding: 1.15rem;
  border: 1px solid rgba(74, 79, 158, 0.18);
  border-radius: 16px;
  background: var(--builder-soft);
}

.package-final-review__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.55rem;
}

.package-final-review__heading h4 {
  margin: 0;
  color: var(--indigo);
  font-size: 1.12rem;
}

.package-final-review__heading > span {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(89, 194, 222, 0.16);
  color: var(--indigo);
  font-size: 0.75rem;
  font-weight: 760;
  text-align: right;
}

.package-final-review__items {
  margin: 0;
}

.package-final-review__items > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(74, 79, 158, 0.12);
}

.package-final-review__items dt,
.package-final-review__items dd {
  margin: 0;
}

.package-final-review__items dt {
  color: var(--body-text, #5b5e72);
  font-size: 0.84rem;
  line-height: 1.45;
}

.package-final-review__items dd {
  color: var(--indigo-dark);
  font-size: 0.86rem;
  font-weight: 760;
  text-align: right;
}

.package-final-review__discounts {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.7rem;
  padding: 0.75rem;
  border-radius: 11px;
  background: rgba(245, 171, 31, 0.12);
  color: var(--indigo-dark);
  font-size: 0.82rem;
  line-height: 1.45;
}

.package-final-review__discounts p {
  margin: 0;
}

.package-final-review__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--indigo);
}

.package-final-review__total span {
  color: var(--body-text, #5b5e72);
  font-size: 0.86rem;
  font-weight: 680;
}

.package-final-review__total strong {
  color: var(--indigo);
  font-size: 1.45rem;
}

.package-final-review__monthly {
  margin: 0.65rem 0 0;
  color: var(--indigo);
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.45;
  text-align: right;
}

.order-route-choice {
  margin-top: 1.5rem;
}

.order-route-choice > legend {
  margin-bottom: 0.8rem;
  color: var(--indigo);
  font-weight: 760;
}

.package-builder-shell .order-route-card {
  min-height: 100%;
  border-width: 2px;
  border-color: rgba(74, 79, 158, 0.42);
  background: rgba(74, 79, 158, 0.045);
  box-shadow: 0 0 0 3px rgba(74, 79, 158, 0.065);
}

.package-builder-shell .order-route-card:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245, 171, 31, 0.14);
  box-shadow: 0 0 0 4px rgba(245, 171, 31, 0.2);
}

.package-builder-shell .order-route-card__top {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.package-builder-shell .order-route-card__top .order-route-card__icon {
  margin-bottom: 0;
}

.package-builder-shell .order-route-card__badge {
  margin: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(89, 194, 222, 0.18);
  color: var(--indigo);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.03em;
}

.package-builder-shell .founder-information {
  margin-top: 1rem;
  border-width: 2px;
}

.founder-information__heading {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.founder-information__icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 13px;
  background: var(--indigo);
  flex: 0 0 auto;
}

.founder-information__icon .fa-icon {
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
}

.package-builder-shell .founder-information h4 {
  margin: 0;
  color: var(--indigo);
  font-size: 1.08rem;
}

.package-builder-shell .founder-information__heading p {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.founder-benefits {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(74, 79, 158, 0.16);
}

.founder-benefits summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 760;
  cursor: pointer;
}

.founder-benefits summary::-webkit-details-marker {
  display: none;
}

.founder-benefits summary .fa-icon {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 160ms ease;
}

.founder-benefits[open] summary .fa-icon {
  transform: rotate(45deg);
}

.founder-benefits ul {
  display: grid;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding-left: 1.15rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.84rem;
  line-height: 1.55;
}

.founder-benefits li::marker {
  color: var(--cyan);
}

.package-builder-shell .founder-information__terms {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.founder-information__link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 0.55rem;
  align-items: center;
  gap: 0.45rem;
  color: var(--indigo);
  font-size: 0.84rem;
  font-weight: 760;
  text-underline-offset: 0.2em;
}

.founder-information__link .fa-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.package-save-note {
  display: flex;
  margin: 1rem 0 0;
  padding: 0.85rem;
  border-radius: 12px;
  background: rgba(89, 194, 222, 0.13);
  color: var(--body-text, #5b5e72);
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.package-save-note .fa-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.12rem;
  flex: 0 0 auto;
  background-color: var(--cyan);
}

.package-summary__route {
  margin-top: 0.7rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(74, 79, 158, 0.14);
  border-radius: 11px;
  color: var(--body-text, #5b5e72);
  font-size: 0.8rem;
  line-height: 1.4;
}

.package-summary__route p {
  margin: 0 0 0.2rem;
  color: var(--indigo);
  font-weight: 760;
}

.package-summary__route span {
  display: block;
}

.builder-controls [data-builder-shell-save] {
  margin-left: auto;
}

.package-summary__items > [data-builder-summary-accessory-row] dt {
  color: var(--indigo);
}

.package-summary__discounts p {
  margin: 0;
}

.package-summary__discounts p + p {
  margin-top: 0.35rem;
}

.builder-media__open {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--indigo);
  cursor: zoom-in;
}

.builder-media__open:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.builder-media__enlarge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 40px;
  padding: 0.5rem 0.72rem;
  border: 1px solid rgba(74, 79, 158, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 760;
  box-shadow: 0 8px 20px rgba(31, 35, 82, 0.12);
}

.builder-media__enlarge .fa-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.builder-media__enlarge--icon {
  justify-content: center;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
}

.builder-media__enlarge--icon .fa-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.package-builder-shell__details {
  margin-top: 1.35rem;
  padding: 0 1.15rem;
  border: 1px solid rgba(74, 79, 158, 0.2);
  border-radius: 16px;
  background: #fff;
}

.package-builder-shell__details + .package-builder-shell__details {
  margin-top: 0.8rem;
}

.support-detail-grid > .package-builder-shell__details + .package-builder-shell__details {
  margin-top: 0;
}

.package-builder-shell__details summary {
  padding-block: 0.65rem;
}

.package-builder-shell__details summary .fa-icon {
  flex: 0 0 auto;
}

.package-builder-shell__details[open] summary .fa-icon,
.shop-details[open] summary .fa-icon {
  transform: rotate(45deg);
}

.package-builder-shell__details .product-details__content,
.shop-details .product-details__content {
  padding: 0.2rem 0 1.15rem;
}

.package-builder-shell__details .product-details__specs,
.shop-details .product-details__specs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-builder-shell__details .product-details__specs li,
.shop-details .product-details__specs li {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(74, 79, 158, 0.12);
}

.package-builder-shell__details .product-details__specs li:last-child,
.shop-details .product-details__specs li:last-child {
  border-bottom: 0;
}

.package-builder-shell__details .product-details__specs strong,
.shop-details .product-details__specs strong {
  color: var(--indigo);
}

.package-builder-shell__details .product-details__specs span,
.shop-details .product-details__specs span {
  color: var(--body-text, #5b5e72);
}

.product-details__box {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  background: var(--builder-soft);
}

.product-details__packaging {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.product-details__packaging img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.product-details__box h4,
.product-details__box h5,
.full-specification h4,
.full-specification h5 {
  margin: 0 0 0.5rem;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.35;
}

.product-details__box p {
  margin: 0.4rem 0 0;
  color: var(--body-text, #5b5e72);
  font-size: 0.88rem;
  line-height: 1.6;
}

.full-specification {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.full-specification > section {
  min-width: 0;
  padding: 1rem;
  border-radius: 14px;
  background: var(--builder-soft);
}

.full-specification > .full-specification__media-section {
  grid-column: 1 / -1;
}

.full-specification__media {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.full-specification__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.full-specification dl {
  margin: 0;
}

.full-specification dl > div {
  padding: 0.62rem 0;
  border-bottom: 1px solid rgba(74, 79, 158, 0.12);
}

.full-specification dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.full-specification dt,
.full-specification dd {
  margin: 0;
}

.full-specification dt {
  color: var(--indigo);
  font-size: 0.82rem;
  font-weight: 760;
}

.full-specification dd {
  margin-top: 0.16rem;
  color: var(--body-text, #5b5e72);
  font-size: 0.86rem;
  line-height: 1.5;
}

.builder-lightbox__numbered-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.builder-lightbox__numbered-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--body-text, #5b5e72);
  line-height: 1.45;
}

.builder-lightbox__numbered-list li > span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
}

.package-summary__logo {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 0 1.1rem;
}

.package-summary__items dt span {
  color: var(--body-text, #5b5e72);
  font-size: 0.78rem;
}

.package-builder-shell__step-heading h3:focus-visible {
  outline: 3px solid rgba(245, 171, 31, 0.72);
  outline-offset: 6px;
  border-radius: 8px;
}

.package-builder-shell .builder-controls {
  margin-top: 1.35rem;
}

.package-builder-shell .builder-controls button {
  min-height: 44px;
}

.package-builder-shell [data-builder-shell-next] {
  margin-left: auto;
}

html[data-display-mode="calm"] .package-builder-shell__frame,
html[data-display-mode="calm"] .package-builder-shell__panel {
  background: var(--builder-surface, #f4efe5);
  border-color: rgba(51, 55, 113, 0.24);
  box-shadow: none;
}

html[data-display-mode="calm"] .builder-device-intro__visual,
html[data-display-mode="calm"] .package-builder-shell__details,
html[data-display-mode="calm"] .product-details__packaging,
html[data-display-mode="calm"] .full-specification__media {
  background: var(--builder-surface, #f4efe5);
}

html[data-display-mode="calm"] .builder-device-intro__visual img,
html[data-display-mode="calm"] .product-details__packaging img,
html[data-display-mode="calm"] .full-specification__media img {
  filter: saturate(0.58) contrast(0.92) brightness(0.98);
}

@media (max-width: 760px) {
  .package-builder-shell .builder-progress__step strong {
    font-size: 0;
  }

  .package-builder-shell .builder-progress__step strong::after {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .package-builder-shell .builder-progress li:nth-child(1) strong::after {
    content: "Step 1";
  }

  .package-builder-shell .builder-progress li:nth-child(2) strong::after {
    content: "Step 2";
  }

  .package-builder-shell .builder-progress li:nth-child(3) strong::after {
    content: "Step 3";
  }

  .package-builder-shell .builder-progress li:nth-child(4) strong::after {
    content: "Step 4";
  }

  .package-builder-shell .builder-progress li:nth-child(5) strong::after {
    content: "Step 5";
  }
}

@media (max-width: 820px) {
  .package-builder-shell__layout .package-summary {
    order: 0;
  }
}

@media (max-width: 620px) {
  .package-builder-shell__frame {
    padding: 0.9rem;
    border-radius: 18px;
  }

  .package-builder-shell .builder-progress {
    margin-bottom: 1rem;
  }

  .package-builder-shell .builder-progress li {
    font-size: 0.66rem;
  }

  .package-builder-shell .builder-progress__step {
    gap: 0.3rem;
    padding: 0.55rem 0.15rem;
  }

  .package-builder-shell .builder-progress__step > .builder-progress__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
  }

  .package-builder-shell .builder-progress__icon::before {
    width: 0.95rem;
    height: 0.95rem;
  }

  .package-builder-shell__panel {
    min-height: 210px;
    padding: 1.2rem;
  }

  .product-details__box,
  .product-details__box.shop-product-details__box,
  .full-specification {
    grid-template-columns: 1fr;
  }

  .builder-device-intro {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    padding: 0.8rem;
  }

  .builder-device-intro__visual {
    max-width: none;
  }

  .builder-device-intro__copy h4 {
    font-size: 1.05rem;
  }

  .builder-device-intro__copy > p:last-child {
    font-size: 0.8rem;
  }

  .package-builder-shell__details .product-details__specs li,
  .shop-details .product-details__specs li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

html[data-display-mode="calm"] .select-card,
html[data-display-mode="calm"] .accessory-card,
html[data-display-mode="calm"] .future-service,
html[data-display-mode="calm"] .shop-product,
html[data-display-mode="calm"] .shop-accessory,
html[data-display-mode="calm"] .shop-note,
html[data-display-mode="calm"] .shop-service,
html[data-display-mode="calm"] .shop-route-card,
html[data-display-mode="calm"] .shop-jump a,
html[data-display-mode="calm"] .shop-specification-grid section,
html[data-display-mode="calm"] .contact-fields__grid input {
  background: var(--builder-surface);
  box-shadow: none;
}

html[data-display-mode="calm"] .shop-section--soft,
html[data-display-mode="calm"] .shop-route-card--founder {
  background: var(--builder-soft);
}

html[data-display-mode="calm"] .shop-product--device > img {
  background: var(--builder-surface);
}

html[data-display-mode="calm"] .package-builder-shell .device-card {
  border-color: rgba(51, 55, 113, 0.32);
  box-shadow: none;
}

html[data-display-mode="calm"] .package-builder-shell .device-card:has(input:checked) {
  border-color: var(--indigo);
  background: var(--builder-surface);
  box-shadow: 0 0 0 2px rgba(51, 55, 113, 0.16);
}

html[data-display-mode="calm"] .package-builder-shell .support-choice-card {
  border-color: rgba(51, 55, 113, 0.32);
  background: var(--builder-surface);
  box-shadow: none;
}

html[data-display-mode="calm"] .package-builder-shell .support-choice-card:has(input:checked) {
  border-color: var(--indigo);
  background: var(--builder-surface);
  box-shadow: 0 0 0 2px rgba(51, 55, 113, 0.16);
}

html[data-display-mode="calm"] .package-builder-shell .accessory-card {
  border-color: rgba(51, 55, 113, 0.32);
  background: var(--builder-surface);
  box-shadow: none;
}

html[data-display-mode="calm"] .package-builder-shell .accessory-card:has(> label > input:checked) {
  border-color: var(--indigo);
  background: var(--builder-surface);
  box-shadow: 0 0 0 2px rgba(51, 55, 113, 0.16);
}

html[data-display-mode="calm"] .package-builder-shell .future-service,
html[data-display-mode="calm"] .package-builder-shell .future-service:has(input:checked) {
  border-color: rgba(51, 55, 113, 0.32);
  background: var(--builder-surface);
  box-shadow: none;
}

html[data-display-mode="calm"] .package-builder-shell .future-service.is-disabled,
html[data-display-mode="calm"] .package-summary__future {
  background: var(--builder-soft);
}

html[data-display-mode="calm"] .package-builder-shell .order-route-card,
html[data-display-mode="calm"] .package-builder-shell .order-route-card:has(input:checked) {
  border-color: rgba(51, 55, 113, 0.32);
  background: var(--builder-surface);
  box-shadow: none;
}

html[data-display-mode="calm"] .package-summary__reset,
html[data-display-mode="calm"] .package-reset-dialog__surface {
  box-shadow: none;
}

html[data-display-mode="calm"] .package-final-review,
html[data-display-mode="calm"] .package-builder-shell .founder-information,
html[data-display-mode="calm"] .package-save-note,
html[data-display-mode="calm"] .package-summary__route {
  background: var(--builder-soft);
}

html[data-display-mode="calm"] .accessory-plan-saving {
  background: var(--builder-surface);
}

html[data-display-mode="calm"] .support-plan-saving {
  background: var(--builder-surface);
}

@media (max-width: 620px) {
  .support-detail-grid {
    grid-template-columns: 1fr;
  }
}

html[data-display-mode="calm"] .package-intro__badge {
  background: rgba(241, 236, 223, 0.96);
}

@media (max-width: 1080px) {
  .package-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 2rem;
  }

  .builder-progress li {
    justify-content: center;
  }

  .builder-progress li b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .package-builder__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .device-choice-grid,
  .plan-choice-grid {
    grid-template-columns: 1fr;
  }

  .select-card {
    min-height: 0;
  }

  .shop-accessory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-product-grid--devices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-accessory--case {
    grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
  }

  .shop-accessory--case .shop-colours {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .package-intro__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 4rem;
  }

  .package-intro__copy h1 {
    max-width: 14ch;
  }

  .package-intro__visual {
    max-width: 680px;
  }

  .package-builder__layout {
    grid-template-columns: 1fr;
  }

  .package-summary {
    position: static;
    order: -1;
  }

  .package-summary__inner {
    box-shadow: none;
  }

  .accessory-grid,
  .order-route-grid,
  .contact-fields__grid {
    grid-template-columns: 1fr;
  }

  .package-builder-shell .accessory-card--case.is-expanded {
    grid-template-columns: 1fr;
  }

  .package-builder-shell .accessory-card--case.is-expanded .case-colours {
    margin: 0 1rem 1rem;
  }

  .package-builder-shell .headphone-choice__grid {
    grid-template-columns: 1fr;
  }

  .contact-fields__grid label:last-child {
    grid-column: auto;
  }

  .shop-catalogue__intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .shop-guided-route,
  .shop-guided-card {
    width: 100%;
  }

  .shop-product-grid {
    grid-template-columns: 1fr;
  }

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

  .shop-detail-grid,
  .shop-service-grid,
  .shop-route-grid {
    grid-template-columns: 1fr;
  }

  .shop-footer-cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .package-intro__actions,
  .builder-controls,
  .shop-note {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-basket-shortcut {
    right: 0.75rem;
    bottom: 0.75rem;
    min-height: 52px;
    padding: 0.65rem 0.8rem;
  }

  .shop-basket-shortcut > strong {
    display: none;
  }

  .shop-basket__actions {
    grid-template-columns: 1fr;
  }

  .shop-basket__surface {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding-inline: 1rem;
  }

  .shop-basket__summary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .shop-basket__summary > div {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem;
  }

  .shop-basket__summary > div > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .shop-basket__summary > div > strong {
    justify-self: end;
    font-size: 0.95rem;
    text-align: right;
  }

  .shop-basket__total strong {
    font-size: 1.2rem;
  }

  .shop-basket__checkout-note {
    text-align: left;
  }

  .package-intro__actions .button,
  .package-intro__shop-link,
  .builder-controls .button,
  .shop-note .button {
    width: 100%;
    justify-content: center;
  }

  .package-intro__badge {
    position: static;
    max-width: none;
    margin-top: 0.8rem;
  }

  .package-builder {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .builder-step__header {
    grid-template-columns: 1fr;
  }

  .builder-progress ol {
    gap: 0.2rem;
  }

  .builder-progress li {
    padding-inline: 0.2rem;
  }

  .accessory-card > label {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.8rem;
  }

  .accessory-card__image {
    width: 92px;
    height: 92px;
  }

  .package-builder-shell .accessory-card > label {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .package-builder-shell .accessory-card__image {
    width: 92px;
    height: 92px;
  }

  .package-builder-shell .accessory-card--charger.is-expanded .builder-charger-colours {
    right: 2rem;
    left: 120px;
  }

  .accessory-card__body {
    min-height: 104px;
  }

  .case-colours > div {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.8rem;
  }

  .future-service,
  .future-service > label {
    gap: 0.75rem;
  }

  .future-service__icon {
    width: 2.55rem;
    height: 2.55rem;
  }

  .package-builder-shell .future-service__benefits {
    grid-column: 1 / -1;
  }

  .package-final-review__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .package-final-review__heading > span {
    text-align: left;
  }

  .package-final-review__items > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .package-final-review__items dd {
    text-align: left;
  }

  .shop-accessory-grid {
    grid-template-columns: 1fr;
  }

  .shop-accessory--case,
  .shop-box-contents,
  .shop-specification-grid {
    grid-template-columns: 1fr;
  }

  .shop-accessory--case .shop-colours,
  .shop-specification-grid__wide {
    grid-column: auto;
  }

  .shop-colours ul {
    grid-template-columns: repeat(3, minmax(48px, 1fr));
  }

  .shop-specification-grid dl > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .get-eletron-page *,
  .get-eletron-page *::before,
  .get-eletron-page *::after,
  .shop-page *,
  .shop-page *::before,
  .shop-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand-indigo: #4a4f9e;
  --brand-amber: #f5ab1f;
  --indigo: var(--brand-indigo);
  --indigo-dark: #292d67;
  --indigo-deep: #20234f;
  --amber: var(--brand-amber);
  --cyan: #59c2de;
  --red: #e84040;
  --red-card: #d93636;
  --ink: #252846;
  --muted: #64687b;
  --line: #e2e4ec;
  --surface: #ffffff;
  --surface-soft: #f7f7fa;
  --surface-warm: #faf8f2;
  --header-surface: rgba(255, 255, 255, 0.97);
  --announcement-surface: #4a4f9e;
  --footer-surface: #292d67;
  --callout-surface: #59c2de;
  --focus-ring: #20234f;
  --selection-surface: #fff0cc;
  --eyebrow-dark: #343872;
  --eyebrow-negative: #ffd98a;
  --hero-label-surface: #eef9fb;
  --hero-label-icon-surface: #ffffff;
  --card-indigo: var(--brand-indigo);
  --card-amber: var(--brand-amber);
  --card-cyan: #59c2de;
  --card-red: #d93636;
  --container: 1220px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --selection-edge-radius: 6px;
  --shadow-soft: 0 18px 50px rgba(33, 37, 82, 0.12);
}

html[data-display-mode="calm"] {
  --indigo: #555b82;
  --indigo-dark: #35394f;
  --indigo-deep: #292c3f;
  --amber: #b9812a;
  --cyan: #b9dce3;
  --red: #b96161;
  --red-card: #a34a4a;
  --ink: #30323f;
  --muted: #5e616e;
  --line: #d9dce1;
  --surface: #fdfdfc;
  --surface-soft: #f2f2f0;
  --surface-warm: #f4f2ed;
  --header-surface: rgba(253, 253, 252, 0.98);
  --announcement-surface: #4a4f9e;
  --footer-surface: #35394f;
  --callout-surface: #d5e7ea;
  --focus-ring: #292c3f;
  --selection-surface: #f1e8d5;
  --eyebrow-dark: #3f435c;
  --eyebrow-negative: #f0ddae;
  --hero-label-surface: #edf2f2;
  --hero-label-icon-surface: var(--surface);
  --card-indigo: #555b82;
  --card-amber: #d2a65c;
  --card-cyan: #b9dce3;
  --card-red: #a75858;
  --shadow-soft: 0 12px 34px rgba(41, 44, 63, 0.09);
}

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

html {
  --anchor-offset: 112px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  color-scheme: light;
  scroll-padding-top: var(--anchor-offset);
  scroll-padding-bottom: 96px;
  scroll-behavior: smooth;
}

html.has-shop-basket-items {
  --anchor-offset: 152px;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--surface);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--selection-surface);
  color: var(--indigo-deep);
}

::-moz-selection {
  background: var(--selection-surface);
  color: var(--indigo-deep);
}

body.menu-open {
  overflow-x: clip;
  overflow-y: visible;
}

img,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
  border-radius: var(--selection-edge-radius);
}

a {
  color: inherit;
  scroll-margin-bottom: 96px;
}

button {
  scroll-margin-bottom: 96px;
}

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

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.fa-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border-radius: 0.18em;
  background-color: currentColor;
  -webkit-mask-image: var(--fa-icon);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--fa-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/*
 * Data-backed masks keep the self-hosted Font Awesome icons available when
 * this prototype is opened directly from disk in browsers such as Firefox.
 * The original SVG source files and licence notices remain in the project.
 */
.fa-icon--arrow-right { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-105.4%20105.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--arrow-left { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-105.4%20105.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E"); transform: rotate(180deg); }
.fa-icon--bars { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20128C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032L32%20448c-17.7%200-32-14.3-32-32s14.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--calendar-check { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M320%200c17.7%200%2032%2014.3%2032%2032l0%2032%2032%200c35.3%200%2064%2028.7%2064%2064l0%20288c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%20128C0%2092.7%2028.7%2064%2064%2064l32%200%200-32c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032l0%2032%20128%200%200-32c0-17.7%2014.3-32%2032-32zm22%20161.7c-10.7-7.8-25.7-5.4-33.5%205.3L189.1%20331.2%20137%20279.1c-9.4-9.4-24.6-9.4-33.9%200s-9.4%2024.6%200%2033.9l72%2072c5%205%2011.9%207.5%2018.8%207s13.4-4.1%2017.5-9.8L347.3%20195.2c7.8-10.7%205.4-25.7-5.3-33.5z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--comment-dots { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20480c141.4%200%20256-107.5%20256-240S397.4%200%20256%200%200%20107.5%200%20240c0%2054.3%2019.2%20104.3%2051.6%20144.5L2.8%20476.8c-4.8%209-3.3%2020%203.6%2027.5s17.8%209.8%2027.1%205.8l118.4-50.7C183.7%20472.6%20218.9%20480%20256%20480zM128%20208a32%2032%200%201%201%200%2064%2032%2032%200%201%201%200-64zm128%200a32%2032%200%201%201%200%2064%2032%2032%200%201%201%200-64zm96%2032a32%2032%200%201%201%2064%200%2032%2032%200%201%201%20-64%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--facebook { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M80%20299.3l0%20212.7%20116%200%200-212.7%2086.5%200%2018-97.8-104.5%200%200-34.6c0-51.7%2020.3-71.5%2072.7-71.5%2016.3%200%2029.4%20.4%2037%201.2l0-88.7C291.4%204%20256.4%200%20236.2%200%20129.3%200%2080%2050.5%2080%20159.4l0%2042.1-66%200%200%2097.8%2066%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--instagram { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M224.3%20141a115%20115%200%201%200%20-.6%20230%20115%20115%200%201%200%20.6-230zm-.6%2040.4a74.6%2074.6%200%201%201%20.6%20149.2%2074.6%2074.6%200%201%201%20-.6-149.2zm93.4-45.1a26.8%2026.8%200%201%201%2053.6%200%2026.8%2026.8%200%201%201%20-53.6%200zm129.7%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM399%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--moon { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%200C114.6%200%200%20114.6%200%20256S114.6%20512%20256%20512c68.8%200%20131.3-27.2%20177.3-71.4%207.3-7%209.4-17.9%205.3-27.1s-13.7-14.9-23.8-14.1c-4.9%20.4-9.8%20.6-14.8%20.6-101.6%200-184-82.4-184-184%200-72.1%2041.5-134.6%20102.1-164.8%209.1-4.5%2014.3-14.3%2013.1-24.4S322.6%208.5%20312.7%206.3C294.4%202.2%20275.4%200%20256%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--pause { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M48%2032C21.5%2032%200%2053.5%200%2080L0%20432c0%2026.5%2021.5%2048%2048%2048l64%200c26.5%200%2048-21.5%2048-48l0-352c0-26.5-21.5-48-48-48L48%2032zm224%200c-26.5%200-48%2021.5-48%2048l0%20352c0%2026.5%2021.5%2048%2048%2048l64%200c26.5%200%2048-21.5%2048-48l0-352c0-26.5-21.5-48-48-48l-64%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--play { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M91.2%2036.9c-12.4-6.8-27.4-6.5-39.6%20.7S32%2057.9%2032%2072l0%20368c0%2014.1%207.5%2027.2%2019.6%2034.4s27.2%207.5%2039.6%20.7l336-184c12.8-7%2020.8-20.5%2020.8-35.1s-8-28.1-20.8-35.1l-336-184z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--quote-left { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%20216C0%20149.7%2053.7%2096%20120%2096l8%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-8%200c-30.9%200-56%2025.1-56%2056l0%208%2064%200c35.3%200%2064%2028.7%2064%2064l0%2064c0%2035.3-28.7%2064-64%2064l-64%200c-35.3%200-64-28.7-64-64L0%20216zm256%200c0-66.3%2053.7-120%20120-120l8%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-8%200c-30.9%200-56%2025.1-56%2056l0%208%2064%200c35.3%200%2064%2028.7%2064%2064l0%2064c0%2035.3-28.7%2064-64%2064l-64%200c-35.3%200-64-28.7-64-64l0-136z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--plus { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M256%2064c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%20160-160%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l160%200%200%20160c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-160%20160%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-160%200%200-160z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--minus { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%20256c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--tiktok { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M448.5%20209.9c-44%20.1-87-13.6-122.8-39.2l0%20178.7c0%2033.1-10.1%2065.4-29%2092.6s-45.6%2048-76.6%2059.6-64.8%2013.5-96.9%205.3-60.9-25.9-82.7-50.8-35.3-56-39-88.9%202.9-66.1%2018.6-95.2%2040-52.7%2069.6-67.7%2062.9-20.5%2095.7-16l0%2089.9c-15-4.7-31.1-4.6-46%20.4s-27.9%2014.6-37%2027.3-14%2028.1-13.9%2043.9%205.2%2031%2014.5%2043.7%2022.4%2022.1%2037.4%2026.9%2031.1%204.8%2046-.1%2028-14.4%2037.2-27.1%2014.2-28.1%2014.2-43.8l0-349.4%2088%200c-.1%207.4%20.6%2014.9%201.9%2022.2%203.1%2016.3%209.4%2031.9%2018.7%2045.7s21.3%2025.6%2035.2%2034.6c19.9%2013.1%2043.2%2020.1%2067%2020.1l0%2087.4z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--truck-fast { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M64%2096c0-35.3%2028.7-64%2064-64l288%200c35.3%200%2064%2028.7%2064%2064l0%2032%2050.7%200c17%200%2033.3%206.7%2045.3%2018.7L621.3%20192c12%2012%2018.7%2028.3%2018.7%2045.3L640%20384c0%2035.3-28.7%2064-64%2064l-3.3%200c-10.4%2036.9-44.4%2064-84.7%2064s-74.2-27.1-84.7-64l-102.6%200c-10.4%2036.9-44.4%2064-84.7%2064s-74.2-27.1-84.7-64l-3.3%200c-35.3%200-64-28.7-64-64l0-48-40%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l112%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24L24%20240c-13.3%200-24-10.7-24-24s10.7-24%2024-24l176%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24L24%20144c-13.3%200-24-10.7-24-24S10.7%2096%2024%2096l40%200zM576%20288l0-50.7-45.3-45.3-50.7%200%200%2096%2096%200zM256%20424a40%2040%200%201%200%20-80%200%2040%2040%200%201%200%2080%200zm232%2040a40%2040%200%201%200%200-80%2040%2040%200%201%200%200%2080z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--whatsapp { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M380.9%2097.1c-41.9-42-97.7-65.1-157-65.1-122.4%200-222%2099.6-222%20222%200%2039.1%2010.2%2077.3%2029.6%20111L0%20480%20117.7%20449.1c32.4%2017.7%2068.9%2027%20106.1%2027l.1%200c122.3%200%20224.1-99.6%20224.1-222%200-59.3-25.2-115-67.1-157zm-157%20341.6c-33.2%200-65.7-8.9-94-25.7l-6.7-4-69.8%2018.3%2018.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2%200-101.7%2082.8-184.5%20184.6-184.5%2049.3%200%2095.6%2019.2%20130.4%2054.1s56.2%2081.2%2056.1%20130.5c0%20101.8-84.9%20184.6-186.6%20184.6zM325.1%20300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5%202.8s-14.3%2018-17.6%2021.8c-3.2%203.7-6.5%204.2-12%201.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8%205.7-9.1%2016.3-30.3%201.8-3.7%20.9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7%201.4-14.8%206.9c-5.1%205.6-19.4%2019-19.4%2046.3s19.9%2053.7%2022.6%2057.4c2.8%203.7%2039.1%2059.7%2094.8%2083.8%2035.2%2015.2%2049%2016.5%2066.6%2013.9%2010.7-1.6%2032.8-13.4%2037.4-26.4s4.6-24.1%203.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--xmark { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M55.1%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L147.2%20256%209.9%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192.5%20301.3%20329.9%20438.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.8%20256%20375.1%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192.5%20210.7%2055.1%2073.4z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-icon--youtube { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M549.7%20124.1C543.5%20100.4%20524.9%2081.8%20501.4%2075.5%20458.9%2064%20288.1%2064%20288.1%2064S117.3%2064%2074.7%2075.5C51.2%2081.8%2032.7%20100.4%2026.4%20124.1%2015%20167%2015%20256.4%2015%20256.4s0%2089.4%2011.4%20132.3c6.3%2023.6%2024.8%2041.5%2048.3%2047.8%2042.6%2011.5%20213.4%2011.5%20213.4%2011.5s170.8%200%20213.4-11.5c23.5-6.3%2042-24.2%2048.3-47.8%2011.4-42.9%2011.4-132.3%2011.4-132.3s0-89.4-11.4-132.3zM232.2%20337.6l0-162.4%20142.7%2081.2-142.7%2081.2z%22%2F%3E%3C%2Fsvg%3E"); }

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: 9px;
  background: var(--indigo-deep);
  color: #fff;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

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

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-ring);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-ring) !important;
}

main:focus {
  outline: 0;
  box-shadow: none;
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--indigo);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow--technical {
  color: var(--eyebrow-dark);
}

.eyebrow--technical-negative {
  color: var(--eyebrow-negative);
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(74, 79, 158, 0.12);
  background: var(--header-surface);
  transition: box-shadow 180ms ease;
  backdrop-filter: blur(14px);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgba(33, 37, 82, 0.09);
}

.announcement-bar {
  min-height: 40px;
  background: var(--announcement-surface);
  color: #fff;
}

.announcement-bar__inner {
  display: grid;
  min-height: 40px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.announcement-bar__actions {
  display: flex;
  grid-column: 3;
  align-items: center;
  justify-self: end;
  gap: 0.45rem;
}

.announcement-bar__actions .calm-toggle {
  grid-column: auto;
  justify-self: auto;
}

.announcement-basket {
  display: inline-flex;
  min-width: 60px;
  height: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.2rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.announcement-basket:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.announcement-basket:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.announcement-basket[hidden] {
  display: none;
}

.announcement-basket .fa-icon {
  width: 0.95rem;
  height: 0.95rem;
  background-color: #fff;
}

.announcement-basket__count {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--indigo-deep, #343978);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

html.has-shop-basket-items .announcement-bar {
  position: sticky;
  top: 0;
  z-index: 101;
}

html.has-shop-basket-items .site-header {
  top: 40px;
}

.announcement-bar__message {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.25;
  text-align: center;
}

.announcement-bar__message .fa-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.header-inner {
  position: relative;
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.site-brand {
  flex: 0 0 auto;
}

.site-brand img {
  width: 166px;
  height: auto;
}

.primary-navigation {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 0.15rem;
}

.nav-item {
  position: relative;
}

.nav-item__main {
  display: flex;
  align-items: center;
}

.nav-submenu {
  position: absolute;
  z-index: 30;
  top: calc(100% - 0.15rem);
  left: 0;
  display: grid;
  min-width: 200px;
  gap: 0.15rem;
  margin: 0;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

@media (min-width: 1081px) {
  .nav-item:hover .nav-submenu,
  .nav-item:focus-within .nav-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
}

.nav-submenu a {
  display: block;
  padding: 0.72rem 0.8rem;
  border-radius: 9px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible,
.nav-submenu a[aria-current="page"] {
  background: var(--surface-soft);
  color: var(--indigo);
}

.nav-submenu a:focus-visible {
  outline: 3px solid rgba(89, 194, 222, 0.45);
  outline-offset: 1px;
}

.header-controls {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
}

.calm-toggle {
  display: inline-flex;
  min-height: 30px;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  gap: 0.38rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

html.has-shop-basket-items .announcement-bar__actions .calm-toggle {
  height: 32px;
  min-height: 32px;
}

.calm-toggle:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.15);
}

.calm-toggle > .fa-icon {
  width: 0.76rem;
  height: 0.76rem;
}

.calm-toggle__track {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: transparent;
  transition: background-color 160ms ease;
}

.calm-toggle__track > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  transition: background-color 160ms ease, transform 160ms ease;
}

.calm-toggle[aria-checked="true"] .calm-toggle__track {
  background: #fff;
}

.calm-toggle[aria-checked="true"] .calm-toggle__track > span {
  background: var(--announcement-surface);
  transform: translateX(14px);
}

.nav-link {
  position: relative;
  padding: 0.8rem 0.72rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link::after {
  position: absolute;
  right: 0.72rem;
  bottom: 0.45rem;
  left: 0.72rem;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--indigo);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.button--header {
  min-height: 46px;
  margin-left: 0.65rem;
  padding-inline: 1.25rem;
  background: var(--indigo);
  box-shadow: 0 8px 20px rgba(74, 79, 158, 0.2);
  color: #fff;
}

.button--header:hover {
  background: var(--indigo-deep);
  box-shadow: 0 12px 26px rgba(42, 46, 105, 0.24);
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--indigo);
  cursor: pointer;
}

.nav-toggle .fa-icon {
  width: 1.18rem;
  height: 1.18rem;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.hero,
.about-hero {
  --hero-cyan-position: 106%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--hero-cyan-position) 9%, rgba(89, 194, 222, 0.09) 0 10.5rem, transparent 10.6rem),
    radial-gradient(circle at 5% 92%, rgba(245, 171, 31, 0.1) 0 9rem, transparent 9.1rem),
    linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
}

@media (min-width: 1081px) {
  .hero,
  .about-hero {
    --hero-cyan-position: 98%;
  }
}

.hero__inner {
  display: grid;
  min-height: clamp(600px, 66vh, 760px);
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(3.75rem, 7vw, 6.75rem);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  max-width: 390px;
  margin: 0 0 1.2rem;
  padding: 0.4rem 1rem 0.4rem 0.42rem;
  border-radius: 999px;
  background: var(--hero-label-surface);
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.hero__label-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--hero-label-icon-surface);
}

.hero__label-icon img {
  width: 27px;
  height: auto;
}

.hero h1,
.footer-callout h2,
.contact-panel__header h2 {
  margin: 0;
  color: var(--indigo-deep);
  font-family: "Inter", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero h1 {
  max-width: 650px;
  color: var(--indigo);
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
}

.hero__title-stop {
  color: var(--amber);
}

.hero__lead {
  max-width: 580px;
  margin: 1.4rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  font-weight: 700;
  line-height: 1.35;
}

.hero__copy {
  max-width: 590px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin-top: 1.8rem;
}

.button--primary {
  background: var(--indigo);
  box-shadow: 0 10px 24px rgba(74, 79, 158, 0.22);
  color: #fff;
}

.button--primary:hover {
  background: var(--indigo-deep);
  box-shadow: 0 14px 30px rgba(42, 46, 105, 0.25);
}

.hero__text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.2rem;
  color: var(--indigo);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration-color: rgba(74, 79, 158, 0.38);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.hero__text-link:hover {
  text-decoration-color: currentColor;
}

.hero__actions .hero__outline-button {
  min-height: 50px;
  margin: 0;
  border-color: var(--indigo);
  background: transparent;
  color: var(--indigo);
  text-align: center;
}

.hero__actions .hero__outline-button:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}

.hero__text-link .fa-icon {
  width: 1rem;
  height: 1rem;
}

.hero__audience {
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.hero__visual {
  display: flex;
  align-self: center;
  min-height: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hero__visual img {
  width: min(100%, 680px);
  height: auto;
  border-radius: clamp(14px, 1.5vw, 22px);
  transform: translateX(clamp(16px, 2vw, 28px));
}

.feature-introduction {
  --feature-section-background: var(--surface-warm);
  position: relative;
  overflow: hidden;
  background: var(--feature-section-background);
}

.feature-introduction__inner {
  padding-block: clamp(4.75rem, 9vw, 8.25rem);
}

.feature-introduction__header {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}

.feature-introduction__header .eyebrow {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.45rem 0.78rem;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
}

.feature-introduction h2 {
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.25rem, 4.4vw, 4.15rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.feature-introduction__title-stop {
  color: var(--red);
}

.feature-introduction__header > p:last-child {
  max-width: 720px;
  margin: 1.25rem auto 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.7;
}

.feature-introduction__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.feature-card {
  --feature-card-background: var(--card-indigo);
  --feature-card-ink: #fff;
  --jigsaw-notch-top: calc(clamp(1.6rem, 2.7vw, 2.15rem) + 31px);
  position: relative;
  display: flex;
  min-height: 330px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.25rem;
  padding: clamp(1.6rem, 2.7vw, 2.15rem) clamp(2.75rem, 3.4vw, 3.25rem) clamp(1.6rem, 2.7vw, 2.15rem) clamp(1.6rem, 2.7vw, 2.15rem);
  border-radius: 22px;
  background: var(--feature-card-background);
  box-shadow: 0 18px 24px -24px rgba(32, 35, 79, 0.35);
  color: var(--feature-card-ink);
}

.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.jigsaw-card__notch {
  position: absolute;
  top: var(--jigsaw-notch-top);
  right: -4px;
  width: 48px;
  height: 64px;
  overflow: hidden;
  color: var(--surface-warm);
  fill: var(--surface-warm);
  pointer-events: none;
  transform: translateY(-50%) scaleX(-1);
  transform-origin: center;
}

.jigsaw-card__notch use {
  color: var(--surface-warm);
  fill: var(--surface-warm);
}

.feature-card--personal {
  --feature-card-background: var(--card-amber);
  --feature-card-ink: #080a18;
}

.feature-card--school {
  --feature-card-background: var(--card-cyan);
  --feature-card-ink: #080a18;
}

.feature-card--companion {
  --feature-card-background: var(--card-red);
  --feature-card-ink: #fff;
}

.feature-card__icon {
  display: block;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
}

.feature-card__icon img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  filter: brightness(0) invert(1);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.feature-card h3 {
  margin: 0;
  color: currentColor;
  font-size: clamp(1.24rem, 1.7vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.feature-card p {
  margin: 0.78rem 0 0;
  color: currentColor;
  font-size: 0.93rem;
  line-height: 1.58;
}

html[data-display-mode="calm"] .feature-card {
  box-shadow: var(--shadow-soft);
}

.hardware-section {
  --hardware-cutout-surface: var(--surface-soft);
  background: var(--surface);
}

.hardware-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 6.5rem);
  padding-block: clamp(4.75rem, 9vw, 8.25rem);
}

.hardware-section__content {
  max-width: 690px;
}

.hardware-section h2 {
  max-width: 680px;
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.35rem, 4.3vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.hardware-section__title-stop {
  color: var(--cyan);
}

.hardware-section__lead {
  max-width: 660px;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.72;
}

.hardware-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.hardware-highlight {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.05rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
}

.hardware-highlight__icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 14px;
}

.hardware-highlight__icon--indigo {
  background: var(--indigo);
}

.hardware-highlight__icon--red {
  background: var(--red-card);
}

.hardware-highlight__icon--amber {
  background: var(--amber);
}

.hardware-highlight__icon--cyan {
  background: var(--cyan);
}

.hardware-highlight__icon img {
  width: 23px;
  height: 23px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.hardware-highlight h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.hardware-highlight p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.hardware-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.hardware-details div {
  min-width: 0;
}

.hardware-details dt {
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.hardware-details dd {
  margin: 0.38rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.hardware-gallery {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  width: 100%;
  max-width: 570px;
  margin: 2rem 0 0 auto;
}

.hardware-gallery__figure {
  margin: 0;
}

.hardware-gallery__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(32, 35, 79, 0.08);
}

.hardware-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}

.hardware-gallery__puzzle {
  position: absolute;
  top: 16%;
  width: 42px;
  height: 57px;
  color: var(--hardware-cutout-surface);
  fill: var(--hardware-cutout-surface);
  pointer-events: none;
}

.hardware-gallery__puzzle use {
  color: var(--hardware-cutout-surface);
  fill: var(--hardware-cutout-surface);
}

.hardware-gallery__puzzle--right {
  right: -4px;
  transform: scaleX(-1);
}

.hardware-gallery__puzzle--left {
  left: -4px;
}

.hardware-gallery__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 1rem;
  margin-top: 0.65rem;
  padding-inline: 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: right;
}

.hardware-gallery__caption strong {
  color: var(--ink);
  font-weight: 600;
}

.hardware-price {
  display: inline-flex;
  width: fit-content;
  align-items: flex-start;
  justify-self: end;
  gap: 0.28rem;
  margin: 0;
  padding: 0.72rem 1rem 0.76rem;
  border-radius: 16px;
  background: var(--card-amber);
  color: #171717;
  box-shadow: 0 10px 24px rgba(32, 35, 79, 0.1);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.hardware-price:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

.hardware-price span {
  padding-top: 0.06rem;
  color: #171717;
}

.hardware-price strong {
  color: #171717;
  font-size: 1.42rem;
  letter-spacing: -0.025em;
}

html[data-display-mode="calm"] .hardware-gallery__item,
html[data-display-mode="calm"] .hardware-price {
  box-shadow: none;
}

html[data-display-mode="calm"] .hardware-section {
  --hardware-cutout-surface: var(--surface);
}

html[data-display-mode="calm"] .hardware-price span {
  color: #171717;
}

@media (min-width: 1081px) {
  .hardware-details {
    margin-top: 3rem;
  }
}

.software-section {
  background: #eef8fa;
}

html[data-display-mode="calm"] .software-section {
  background: #f0f1ee;
}

.software-section__inner {
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.software-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 6.5rem);
}

.software-section__introduction {
  max-width: 690px;
}

.software-section h2 {
  max-width: 680px;
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.35rem, 4.3vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.software-section__title-stop {
  color: var(--amber);
}

.software-section__lead {
  margin: 1.4rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  font-weight: 600;
  line-height: 1.58;
}

.software-section__inclusive {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.72;
}

.software-section__visual {
  position: relative;
  width: 100%;
  max-width: 570px;
  margin: 2rem 0 0 auto;
}

.software-section__image-frame {
  overflow: hidden;
  border: 0;
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.software-section__image-frame img {
  width: 100%;
  height: auto;
}

.software-section__mode-carousel {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 14px 32px rgba(32, 35, 79, 0.12);
  font-size: 0.82rem;
  line-height: 1.48;
  transform: none;
}

.software-section__mode-slide {
  display: grid;
  min-height: 54px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
}

.software-section__mode-copy strong,
.software-section__mode-copy span {
  display: block;
}

.software-section__mode-copy strong {
  color: var(--ink);
}

.software-section__mode-copy span {
  margin-top: 0.08rem;
}

.software-section__mode-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
}

.software-section__mode-icon--amber {
  background: var(--amber);
}

.software-section__mode-icon--indigo {
  background: var(--indigo);
}

.software-section__mode-icon--cyan {
  background: var(--cyan);
}

.software-section__mode-icon--red {
  background: var(--red);
}

.software-section__mode-icon img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.software-section__mode-controls {
  display: grid;
  min-height: 28px;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.software-section__mode-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.software-section__mode-selector,
.software-section__mode-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.software-section__mode-selector span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9bccb;
  transition: width 160ms ease, background-color 160ms ease;
}

.software-section__mode-selector.is-active span {
  width: 17px;
  border-radius: 999px;
  background: var(--indigo);
}

.software-section__mode-arrow {
  background: var(--surface-soft);
}

.software-section__mode-arrow img {
  width: 10px;
  height: 12px;
  opacity: 0.72;
}

.software-section__mode-arrow--previous img {
  transform: rotate(180deg);
}

.software-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3.4rem);
  margin: clamp(3rem, 5vw, 4.5rem) 0 0;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(33, 37, 82, 0.08);
  list-style: none;
}

.software-feature {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  min-width: 0;
}

.software-feature__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
}

.software-feature__icon--indigo {
  background: var(--indigo);
}

.software-feature__icon--cyan {
  background: var(--cyan);
}

.software-feature__icon--amber {
  background: var(--amber);
}

.software-feature__icon--red {
  background: var(--red);
}

.software-feature__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.software-feature h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.35;
}

.software-feature p {
  margin: 0.42rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.software-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.software-app-control,
.software-symbols {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.software-app-control {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(180px, 0.72fr);
  grid-template-rows: auto 1fr;
  min-height: 620px;
  border: 1px solid transparent;
  background: var(--indigo);
  color: #ffffff;
}

.software-app-control__heading,
.software-symbols__heading {
  min-height: calc(0.76rem + 0.65rem + (clamp(1.8rem, 3vw, 2.7rem) * 1.08));
}

.software-app-control__heading {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: clamp(1.7rem, 3.2vw, 2.5rem) clamp(1.7rem, 3.2vw, 2.5rem) 0;
}

.software-app-control__content {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  flex-direction: column;
  padding: 0 clamp(1.7rem, 3.2vw, 2.5rem) clamp(1.7rem, 3.2vw, 2.5rem);
}

.software-app-control h3,
.software-symbols h3 {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.software-app-control h3 {
  color: #ffffff;
}

.software-app-control h3 span {
  color: var(--amber);
}

.software-app-control__content > p:not(.eyebrow):not(.software-app-control__standard) {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.9rem;
  line-height: 1.68;
}

.software-app-control__safeguards {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.software-app-control__safeguards li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

.software-app-control__safeguards li + li {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.software-app-control__safeguard-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
}

.software-app-control__safeguard-icon--safety {
  background: var(--red);
}

.software-app-control__safeguard-icon--time {
  background: var(--amber);
}

.software-app-control__safeguard-icon--review {
  background: var(--cyan);
}

.software-app-control__safeguard-icon img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

.software-app-control__safeguard-icon--time img,
.software-app-control__safeguard-icon--review img {
  filter: none;
}

.software-app-control__visual {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin: 1rem 1.35rem 0 0;
}

.software-app-control__visual img {
  display: block;
  width: 100%;
  height: 475px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  object-fit: cover;
  object-position: top;
}

.software-symbols {
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 3.2vw, 2.5rem);
  border: 1px solid var(--line);
  background: var(--surface-warm);
}

.software-symbols h3 {
  max-width: 520px;
  color: var(--indigo);
}

.software-symbols h3 span {
  color: var(--red);
}

.software-symbols > p:not(.eyebrow) {
  max-width: 540px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.68;
}

.software-symbols__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.6rem;
}

.software-symbols__grid img {
  width: 100%;
  height: auto;
}

.software-proof-action {
  display: flex;
  flex: 1;
  min-height: 76px;
  align-items: flex-end;
}

.software-proof-action--companion {
  justify-content: flex-start;
}

.software-proof-action--schedules {
  justify-content: flex-end;
}

.software-proof-link {
  display: flex;
  min-height: 40px;
  width: fit-content;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.62rem 1rem;
  border-radius: 999px;
  background: var(--indigo);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.software-proof-link:hover {
  background: var(--indigo-deep);
}

.software-proof-link img {
  width: 12px;
  height: 14px;
  filter: brightness(0) invert(1);
}

.software-proof-link--light {
  background: #ffffff;
  color: var(--indigo);
}

.software-proof-link--light:hover {
  background: var(--surface-warm);
}

.software-proof-link--light img {
  filter: none;
}

html[data-display-mode="calm"] .software-section__image-frame,
html[data-display-mode="calm"] .software-section__mode-carousel,
html[data-display-mode="calm"] .software-features {
  box-shadow: none;
}

html[data-display-mode="calm"] .software-symbols__grid img {
  filter: saturate(0.58) contrast(0.96);
  opacity: 0.94;
}

.real-life {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 171, 31, 0.1) 0 8rem, transparent 8.1rem),
    linear-gradient(110deg, rgba(89, 194, 222, 0.11), var(--surface) 70%);
}

.real-life__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.real-life__content {
  max-width: 550px;
}

.real-life h2 {
  max-width: 580px;
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.45rem, 4.4vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.real-life__title-stop {
  color: var(--red);
}

.real-life__lead {
  max-width: 530px;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.72;
}

.real-life__lead--secondary {
  margin-top: 0.85rem;
}

.real-life__outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.35rem);
  margin: clamp(1.8rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.real-life__outcomes li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.72rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.real-life__outcome-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
}

.real-life__outcome-icon img {
  width: 21px;
  height: 21px;
  filter: brightness(0) invert(1);
}

.real-life__outcome-icon--indigo {
  background: var(--indigo);
}

.real-life__outcome-icon--cyan {
  background: var(--cyan);
}

.real-life__outcome-icon--cyan img {
  filter: none;
}

.real-life__outcome-icon--red {
  background: var(--red);
}

.real-life__outcome-icon--amber {
  background: var(--amber);
}

.real-life__outcome-icon--amber img {
  filter: none;
}

.real-life__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.real-life__link img {
  width: 14px;
  height: 16px;
}

.real-life__visual {
  position: relative;
  margin: 1.8rem 0 0;
}

.real-life__image-frame {
  overflow: hidden;
  border-radius: clamp(20px, 2.5vw, 34px);
  box-shadow: 0 18px 42px rgba(32, 35, 79, 0.13);
}

.real-life__image-frame img {
  width: 100%;
  height: auto;
}

.real-life__butterfly {
  position: absolute;
  top: clamp(-32px, -2.2vw, -20px);
  right: clamp(-26px, -1.8vw, -14px);
  display: grid;
  width: clamp(82px, 8vw, 112px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 14px 30px rgba(32, 35, 79, 0.14);
}

.real-life__butterfly img {
  width: 53%;
  height: auto;
  filter: brightness(0) invert(1);
}

.real-life__testimonial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: clamp(1.25rem, 2.2vw, 1.7rem);
  border: 1px solid rgba(74, 79, 158, 0.1);
  border-radius: clamp(18px, 2vw, 24px);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(32, 35, 79, 0.09);
}

.real-life__quote-mark {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--indigo);
}

.real-life__testimonial-stage {
  display: grid;
  min-width: 0;
}

.real-life__testimonial-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.real-life__testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.real-life__testimonial-slide p {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.58;
}

.real-life__testimonial cite {
  display: block;
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
}

.real-life__testimonial-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(74, 79, 158, 0.18);
  border-radius: 50%;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.real-life__testimonial-toggle:hover {
  border-color: rgba(74, 79, 158, 0.48);
  background: rgba(74, 79, 158, 0.06);
}

.real-life__testimonial-toggle .fa-icon {
  width: 0.78rem;
  height: 0.78rem;
}

html[data-display-mode="calm"] .real-life {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .real-life__image-frame,
html[data-display-mode="calm"] .real-life__butterfly,
html[data-display-mode="calm"] .real-life__testimonial {
  box-shadow: none;
}

/* Homepage newsletter */

.newsletter {
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.newsletter__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.newsletter__content {
  min-width: 0;
}

.newsletter h2 {
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(1.65rem, 2.4vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  white-space: nowrap;
}

.newsletter h2 span {
  color: var(--cyan);
}

.newsletter__intro {
  max-width: 58ch;
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: clamp(0.94rem, 1.1vw, 1rem);
  line-height: 1.6;
}

.shop-footer-cta.newsletter h2 {
  white-space: normal;
}

.shop-footer-cta.newsletter .eyebrow {
  margin: 0 0 0.55rem;
  color: var(--red);
}

.shop-footer-cta.newsletter .shop-footer-cta__inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-footer-cta__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.newsletter__form {
  min-width: 0;
  align-self: center;
}

.newsletter__fields {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.newsletter__fields input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid #b8bbc9;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.newsletter__fields input:hover {
  border-color: var(--indigo);
}

.newsletter__fields input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.newsletter__fields .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.newsletter__privacy,
.newsletter__status {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.newsletter__privacy a {
  color: var(--indigo);
  font-weight: 700;
  text-underline-offset: 3px;
}

.newsletter__status {
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

html[data-display-mode="calm"] .newsletter {
  background: var(--surface-warm);
}

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

  .shop-footer-cta__action {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .shop-footer-cta__action .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .newsletter__form {
    margin-top: 0.15rem;
  }

  .newsletter__fields {
    flex-direction: column;
  }

  .newsletter__fields .button {
    width: 100%;
  }
}

@media (max-width: 1080px) {
  .real-life__inner {
    grid-template-columns: 1fr;
  }

  .real-life__content {
    max-width: 720px;
  }

  .real-life__visual {
    width: min(100%, 760px);
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .real-life__inner {
    gap: 3rem;
    padding-block: 4rem;
  }

  .real-life h2 {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }

  .real-life__outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .real-life__butterfly {
    right: -8px;
    width: 78px;
  }
}

/* Supporting, legal and error pages */

.supporting-page main h1,
.supporting-page main h2,
.supporting-page main h3 {
  font-family: "Inter", Arial, sans-serif;
}

.supporting-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% -24%, rgba(89, 194, 222, 0.16) 0 13rem, transparent 13.1rem),
    radial-gradient(circle at 4% 122%, rgba(245, 171, 31, 0.14) 0 10rem, transparent 10.1rem),
    linear-gradient(118deg, var(--surface-warm) 0%, var(--surface) 72%);
}

.supporting-hero__inner {
  position: relative;
  display: grid;
  min-height: 390px;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.55fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding-block: clamp(3.75rem, 7vw, 6.25rem);
}

.supporting-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.supporting-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  padding: 0.38rem 1rem 0.38rem 0.42rem;
  border-radius: 999px;
  background: var(--hero-label-surface);
  color: var(--indigo);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.supporting-hero__label-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--hero-label-icon-surface);
}

.supporting-hero__label-icon img {
  width: 23px;
  height: auto;
}

.supporting-hero h1 {
  max-width: 750px;
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.65rem, 5vw, 4.65rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.supporting-hero h1 > span {
  color: var(--amber);
}

.supporting-hero--terms h1 > span,
.supporting-hero--error-404 h1 > span {
  color: var(--red);
}

.supporting-hero--error-500 h1 > span {
  color: var(--cyan);
}

.supporting-hero__lead {
  max-width: 660px;
  margin: 1.35rem 0 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.supporting-hero__mark {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
}

.supporting-hero__mark::before {
  position: absolute;
  width: min(25vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(89, 194, 222, 0.14);
  content: "";
}

.supporting-hero__mark img {
  position: relative;
  width: min(15vw, 150px);
  height: auto;
}

.legal-content {
  background: var(--surface-soft);
}

.legal-content__inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(4rem, 7vw, 6.5rem);
}

.legal-summary {
  position: sticky;
  top: 116px;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.legal-summary h2 {
  margin: 0;
  color: var(--indigo);
  font-size: 1.1rem;
  line-height: 1.25;
}

.legal-summary p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.legal-summary ol {
  display: grid;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding-left: 1.25rem;
}

.legal-summary a {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.legal-document {
  min-width: 0;
  max-width: 820px;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.legal-document__updated {
  display: inline-flex;
  margin: 0 0 1.75rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: var(--surface-warm);
  color: var(--indigo);
  font-size: 0.8rem;
  font-weight: 700;
}

.legal-section + .legal-section {
  margin-top: 2.65rem;
  padding-top: 2.65rem;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  margin: 0 0 1rem;
  color: var(--indigo);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.legal-section h3 {
  margin: 1.65rem 0 0.55rem;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.35;
}

.legal-section p,
.legal-section li,
.legal-section address {
  color: var(--ink);
  line-height: 1.72;
  text-wrap: pretty;
}

.legal-section p {
  margin: 0.85rem 0 0;
}

.legal-section ul {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding-left: 1.3rem;
}

.legal-section a {
  color: var(--indigo);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.legal-inline-button {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--indigo);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.legal-inline-button:focus-visible {
  border-radius: 0.2rem;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.legal-section address {
  margin-top: 1rem;
  font-style: normal;
}

.legal-note {
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.legal-section .privacy-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.privacy-principles li {
  padding: 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.error-main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 2% 98%, rgba(245, 171, 31, 0.12) 0 12rem, transparent 12.1rem),
    radial-gradient(circle at 99% 3%, rgba(89, 194, 222, 0.12) 0 15rem, transparent 15.1rem),
    var(--surface-warm);
}

.error-main__inner {
  display: grid;
  min-height: clamp(570px, 68vh, 760px);
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.7fr);
  align-items: center;
  gap: clamp(2rem, 8vw, 7rem);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.error-main__code {
  margin: 0 0 0.7rem;
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.error-main h1 {
  max-width: 720px;
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-wrap: balance;
}

.error-main h1 > span { color: var(--amber); }
.error-page--404 .error-main h1 > span { color: var(--red); }
.error-page--500 .error-main h1 > span { color: var(--cyan); }

.error-main__lead {
  max-width: 650px;
  margin: 1.35rem 0 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.6;
}

.error-main__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.25rem;
  margin-top: 1.8rem;
}

.error-main__support {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.5rem;
  color: var(--indigo);
  font-weight: 700;
  text-underline-offset: 0.22em;
}

.error-main__visual {
  position: relative;
  display: grid;
  min-height: 340px;
  place-items: center;
}

.error-main__visual::before {
  position: absolute;
  width: min(33vw, 370px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(89, 194, 222, 0.13);
  content: "";
}

.error-page--404 .error-main__visual::before { background: rgba(232, 64, 64, 0.09); }
.error-page--500 .error-main__visual::before { background: rgba(74, 79, 158, 0.1); }

.error-main__visual img {
  position: relative;
  width: min(28vw, 310px);
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(33, 37, 82, 0.15));
}

html[data-display-mode="calm"] .supporting-hero,
html[data-display-mode="calm"] .error-main {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .supporting-hero__mark::before,
html[data-display-mode="calm"] .error-main__visual::before {
  opacity: 0.45;
}

html[data-display-mode="calm"] .legal-content {
  background: var(--surface-soft);
}

html[data-display-mode="calm"] .legal-summary,
html[data-display-mode="calm"] .legal-document {
  box-shadow: none;
}

html[data-display-mode="calm"] .error-main__visual img {
  filter: saturate(0.64) contrast(0.92) drop-shadow(0 14px 22px rgba(41, 44, 63, 0.1));
}

@media (max-width: 900px) {
  .supporting-hero__inner,
  .error-main__inner {
    grid-template-columns: 1fr;
  }

  .supporting-hero__mark {
    display: none;
  }

  .legal-content__inner {
    grid-template-columns: 1fr;
  }

  .legal-summary {
    position: static;
  }

  .error-main__visual {
    min-height: 260px;
  }

  .error-main__visual::before {
    width: min(68vw, 320px);
  }

  .error-main__visual img {
    width: min(56vw, 270px);
  }
}

@media (max-width: 600px) {
  .supporting-hero__inner {
    min-height: 0;
    padding-block: 3.5rem;
  }

  .supporting-hero h1 {
    font-size: clamp(2.55rem, 12vw, 3.55rem);
  }

  .legal-content__inner {
    padding-block: 3.5rem;
  }

  .legal-document {
    padding: 1.25rem;
    border-radius: var(--radius-md);
  }

  .privacy-principles {
    grid-template-columns: 1fr;
  }

  .error-main__inner {
    min-height: 0;
    padding-block: 3.75rem;
  }

  .error-main__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .error-main__actions .button,
  .error-main__support {
    width: 100%;
    justify-content: center;
  }
}

.footer-callout {
  background: var(--indigo);
  color: #fff;
}

.footer-callout__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.4rem, 4.5vw, 3.75rem);
}

.footer-callout__puzzle-mark {
  display: block;
  width: clamp(98px, 11vw, 142px);
  opacity: 0.18;
  pointer-events: none;
}

.footer-callout__puzzle-mark img {
  width: 100%;
  height: auto;
}

.footer-callout h2 {
  max-width: 700px;
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.12;
}

.footer-callout__better {
  color: var(--cyan);
}

.footer-callout__minds {
  color: var(--amber);
}

html[data-display-mode="calm"] .footer-callout__minds,
html[data-display-mode="calm"] .footer-column h2 {
  color: var(--cyan);
}

.footer-callout__actions {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.7rem;
}

.button--light {
  background: #fff;
  box-shadow: 0 10px 25px rgba(32, 35, 79, 0.13);
  color: var(--indigo-deep);
}

.button--light:hover {
  box-shadow: 0 14px 30px rgba(32, 35, 79, 0.18);
}

.footer-callout__primary {
  min-width: 178px;
  color: var(--indigo);
}

.footer-callout__primary img {
  width: 22px;
  height: auto;
}

.footer-callout__contact {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 0.65rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer-callout__contact:hover {
  text-decoration-thickness: 2px;
}

.footer-callout__contact img {
  width: 13px;
  height: 15px;
  filter: brightness(0) invert(1);
}

.button--outline {
  border-color: var(--indigo-deep);
  color: var(--indigo-deep);
}

.button--outline:hover {
  background: var(--indigo-deep);
  color: #fff;
}

.footer-main {
  background: var(--footer-surface);
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(270px, 1.6fr) repeat(3, minmax(130px, 0.75fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.footer-brand img {
  width: 166px;
  height: auto;
  margin-bottom: 1.5rem;
}

.footer-brand p {
  max-width: 380px;
  margin: 0 0 1.1rem;
  color: #d9dcf3;
}

.footer-email {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: #fff;
  font-weight: 700;
  text-underline-offset: 5px;
}

.footer-column h2 {
  margin: 0 0 1.2rem;
  color: var(--amber);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.footer-column ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 0.55rem;
  color: #f7f8ff;
  font-size: 0.92rem;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.footer-column a .fa-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.footer-column a:hover,
.footer-email:hover {
  color: var(--amber);
  text-decoration-color: currentColor;
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #c6c9e6;
}

.footer-company p {
  margin: 0;
  font-size: 0.74rem;
}

.footer-company p + p {
  margin-top: 0.35rem;
}

.footer-legal {
  display: flex;
  flex: 0 0 auto;
  gap: 1.2rem;
}

.footer-legal a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: #fff;
  font-size: 0.78rem;
  text-underline-offset: 4px;
}

@media (min-width: 821px) {
  .footer-brand {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-self: stretch;
  }

  .footer-brand > a:first-child {
    display: inline-flex;
    width: max-content;
  }

  .footer-brand img {
    margin-bottom: 0;
  }

  .footer-brand p {
    align-self: center;
    margin: 0;
  }
}

.contact-dock {
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: 110;
}

.contact-toggle {
  position: relative;
  display: inline-flex;
  min-height: 88px;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--indigo-deep);
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease;
}

.contact-toggle:hover {
  transform: translateY(-2px);
}

.contact-toggle__bubble {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0.62rem 0.95rem;
  border: 1px solid rgba(74, 79, 158, 0.24);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(32, 35, 79, 0.16);
  color: var(--indigo-deep);
  font-size: 0.86rem;
  white-space: nowrap;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-toggle__bubble::after {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 15px;
  height: 15px;
  border-top: 1px solid rgba(74, 79, 158, 0.24);
  border-right: 1px solid rgba(74, 79, 158, 0.24);
  background: #fff;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.contact-toggle__mascot {
  position: relative;
  z-index: 1;
  display: block;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 10px rgba(32, 35, 79, 0.2));
  transition: transform 160ms ease;
}

.contact-toggle__mascot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-toggle:hover .contact-toggle__bubble {
  border-color: rgba(74, 79, 158, 0.48);
  box-shadow: 0 14px 34px rgba(32, 35, 79, 0.2);
}

.contact-toggle:hover .contact-toggle__mascot {
  transform: scale(1.035) rotate(1.5deg);
}

.contact-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}

.contact-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--surface-soft);
}

.contact-panel__header span {
  color: var(--indigo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-panel__header h2 {
  margin: 0.18rem 0 0;
  color: var(--indigo-deep);
  font-size: 1.55rem;
}

.contact-panel__header p {
  max-width: 270px;
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.contact-panel__close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--indigo-deep);
  line-height: 1;
  cursor: pointer;
}

.contact-panel__close .fa-icon {
  width: 1rem;
  height: 1rem;
}

.contact-panel__actions {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
}

.contact-action {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.contact-action:hover {
  border-color: rgba(74, 79, 158, 0.45);
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.contact-action--whatsapp:hover {
  border-color: rgba(20, 121, 95, 0.45);
  background: #f0faf6;
}

.contact-action__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  font-weight: 700;
}

.contact-action__icon .fa-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.contact-action--whatsapp .contact-action__icon {
  background: #14795f;
}

.contact-action strong,
.contact-action small {
  display: block;
}

.contact-action strong {
  font-size: 0.9rem;
}

.contact-action small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.75rem;
}

html[data-display-mode="calm"] .hero {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .button:hover,
html[data-display-mode="calm"] .contact-toggle:hover,
html[data-display-mode="calm"] .contact-action:hover {
  transform: none;
}

html[data-display-mode="calm"] .contact-toggle:hover .contact-toggle__mascot {
  transform: none;
}

html[data-display-mode="calm"] *,
html[data-display-mode="calm"] *::before,
html[data-display-mode="calm"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (max-width: 1080px) {
  html {
    --anchor-offset: 104px;
  }

  .header-inner {
    min-height: 88px;
  }

  .announcement-bar__inner {
    grid-template-columns: 1fr auto;
  }

  .announcement-bar__actions {
    grid-column: 2;
  }

  .announcement-bar__message {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
  }

  .calm-toggle {
    grid-column: 2;
  }

  .site-brand img {
    width: 149px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-controls {
    display: flex;
  }

  .primary-navigation {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: grid;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  .primary-navigation.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .nav-link {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
  }

  .nav-item {
    width: 100%;
  }

  .nav-item__main {
    display: block;
  }

  .nav-item__main .nav-link {
    min-width: 0;
  }

  .nav-submenu {
    position: static;
    display: grid;
    min-width: 0;
    margin: 0.2rem 0 0.45rem 1rem;
    padding: 0.35rem;
    border-radius: 11px;
    box-shadow: none;
    opacity: 1;
    pointer-events: none;
    transform: none;
    visibility: hidden;
  }

  .primary-navigation.is-open .nav-submenu {
    pointer-events: auto;
    visibility: visible;
  }

  .nav-submenu a {
    padding: 0.72rem 0.8rem;
    font-size: 0.95rem;
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link[aria-current="page"] {
    background: var(--surface-soft);
  }

  .button--header {
    margin: 0.55rem 0 0;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
  }

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

  .software-proof-grid {
    grid-template-columns: 1fr;
  }

  .software-app-control {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.55fr);
  }

  .footer-grid {
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 820px) {
  .hero__inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .hero__content {
    max-width: 680px;
  }

  .hero__visual {
    min-height: 0;
  }

  .hero__visual img {
    transform: none;
  }

  .hardware-section__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hardware-section__content {
    max-width: none;
  }

  .hardware-gallery {
    max-width: 680px;
    margin-top: 0;
    margin-inline: auto;
  }

  .software-section__header {
    grid-template-columns: 1fr;
  }

  .software-section__introduction {
    max-width: 680px;
  }

  .software-section__visual {
    max-width: 680px;
    margin: 0 auto;
  }

  .software-section__mode-carousel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 1rem;
    transform: none;
  }

  .software-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 3rem;
  }

  .footer-callout__inner {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 1.8rem 2.25rem;
  }

  .footer-callout__actions {
    grid-column: 2;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  html {
    --anchor-offset: 92px;
  }

  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .footer-callout__inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .header-inner {
    min-height: 80px;
  }

  .site-brand img {
    width: 132px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .announcement-bar__inner {
    gap: 0.6rem;
    padding-block: 0.26rem;
  }

  .announcement-bar__message {
    font-size: 0.68rem;
  }

  .calm-toggle {
    padding-inline: 0.42rem;
    font-size: 0.66rem;
  }

  .hero__inner {
    gap: 2rem;
    padding-block: 3rem;
  }

  .hero {
    background:
      radial-gradient(circle at 112% 7%, rgba(89, 194, 222, 0.075) 0 6.5rem, transparent 6.6rem),
      radial-gradient(circle at 1% 95%, rgba(245, 171, 31, 0.085) 0 6rem, transparent 6.1rem),
      linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
  }

  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .hero__lead {
    font-size: 1.2rem;
  }

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

  .hero__actions .button {
    width: 100%;
  }

  .hero__text-link {
    width: 100%;
    justify-content: center;
  }

  .hero__visual {
    max-width: 480px;
    margin-inline: auto;
  }

  .feature-introduction__inner {
    padding-block: 4rem;
  }

  .feature-introduction h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  .feature-introduction__grid {
    grid-template-columns: 1fr;
    margin-top: 2.75rem;
  }

  .feature-card {
    min-height: 270px;
  }

  .hardware-section__inner {
    gap: 2.5rem;
    padding-block: 4rem;
  }

  .hardware-section h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  .hardware-highlights,
  .hardware-details {
    grid-template-columns: 1fr;
  }

  .hardware-details {
    gap: 1rem;
  }

  .software-section__inner {
    padding-block: 4rem;
  }

  .software-section h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  .software-features {
    grid-template-columns: 1fr;
    padding: 1.4rem;
  }

  .software-app-control {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .software-app-control__heading,
  .software-app-control__content,
  .software-app-control__visual {
    grid-column: 1;
    grid-row: auto;
  }

  .software-app-control__visual {
    width: min(calc(100% - 2.7rem), 280px);
    margin: 0 auto;
  }

  .software-app-control__visual img {
    height: 440px;
  }

  .software-symbols__grid {
    grid-template-columns: repeat(2, minmax(0, 112px));
    justify-content: center;
  }

  .footer-callout__actions {
    grid-column: 1;
    width: 100%;
    align-items: flex-start;
  }

  .footer-callout__actions .button {
    width: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 1.5rem;
  }

  .footer-column:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    padding-bottom: 6rem;
  }

  .footer-legal {
    flex-wrap: wrap;
  }

  .contact-dock {
    right: 16px;
    bottom: 12px;
  }

  .contact-toggle {
    width: auto;
    min-height: 72px;
    padding: 0;
  }

  .contact-toggle__bubble {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .contact-toggle__bubble::after {
    display: none;
  }

  .contact-toggle__mascot {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 390px) {
  .site-brand img {
    width: 116px;
  }

  .header-controls {
    gap: 0.35rem;
  }
}

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

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

  .contact-toggle:hover .contact-toggle__mascot {
    transform: none;
  }
}

/* About page */

.about-page main h1,
.about-page main h2,
.about-page main h3 {
  font-family: "Inter", Arial, sans-serif;
}

.about-page main h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.2rem, 3.45vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.about-page main h2 > span {
  color: var(--amber);
}

.about-page main p {
  text-wrap: pretty;
}

.about-hero {
  position: relative;
}

.about-hero__inner {
  display: grid;
  min-height: clamp(600px, 66vh, 760px);
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(3.75rem, 7vw, 6.75rem);
}

.about-hero__content {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.about-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  max-width: 390px;
  margin: 0 0 1.2rem;
  padding: 0.4rem 1rem 0.4rem 0.42rem;
  border-radius: 999px;
  background: var(--hero-label-surface);
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.about-hero__label-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--hero-label-icon-surface);
}

.about-hero__label-icon img {
  width: 27px;
  height: auto;
}

.about-hero h1 {
  max-width: 650px;
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.about-hero h1 > span {
  color: var(--amber);
}

.about-hero__lead {
  max-width: 580px;
  margin: 1.4rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  font-weight: 700;
  line-height: 1.35;
}

.about-hero__copy {
  max-width: 590px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.about-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin-top: 1.8rem;
}

.about-hero__text-link,
.about-text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.2rem;
  color: var(--indigo);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

.about-hero__text-link:hover,
.about-text-link:hover {
  color: var(--indigo-deep);
}

.about-hero__visual {
  display: flex;
  align-self: center;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

.about-hero__visual img {
  display: block;
  width: min(100%, 680px);
  height: auto;
  border-radius: clamp(14px, 1.5vw, 22px);
  transform: none;
}

.about-story {
  background: var(--surface);
}

.about-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.about-story__content {
  max-width: 860px;
}

.about-story__content > p:not(.eyebrow) {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.8;
}

.about-story__content > p:nth-of-type(2) {
  color: var(--muted);
  font-size: clamp(1.1rem, 1.5vw, 1.24rem);
  font-weight: 600;
}

.about-story__content > .about-story__closing {
  font-weight: 600;
}

.about-story__signoff {
  display: inline-grid;
  gap: 0.45rem;
  margin-top: clamp(1.7rem, 3vw, 2.4rem);
}

.about-story__signature,
.about-story__role {
  margin: 0;
}

.about-story__signature {
  color: var(--indigo);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(1.75rem, 2.5vw, 2.15rem);
  font-weight: 600;
  line-height: 1;
}

.about-story__role {
  line-height: 1.3;
}

.about-story__visual {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: 1.866rem 0 0;
  justify-self: end;
}

.about-page .about-story h2 > span {
  color: var(--red);
}

.about-story__symbol-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  object-fit: cover;
}

.about-story__family-photo {
  position: absolute;
  right: -0.7rem;
  bottom: -0.8rem;
  display: block;
  width: clamp(110px, 9.6vw, 146px);
  aspect-ratio: 4 / 5;
  padding: 4px;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(29, 35, 82, 0.18);
  transform: rotate(3deg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.about-story__family-photo img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.about-story__visual figcaption,
.about-gallery figcaption {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.about-mission {
  position: relative;
  overflow: hidden;
  background: var(--card-indigo);
  color: #fff;
}

.about-mission::before,
.about-mission::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.about-mission::before {
  top: -9rem;
  right: -6rem;
  width: 24rem;
  height: 24rem;
  background: rgba(89, 194, 222, 0.12);
}

.about-mission::after {
  bottom: -10rem;
  left: -7rem;
  width: 22rem;
  height: 22rem;
  background: rgba(245, 171, 31, 0.1);
}

.about-mission__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: end;
  column-gap: clamp(3rem, 8vw, 8rem);
  row-gap: 1rem;
  padding-block: clamp(5rem, 8vw, 7.5rem);
}

.about-mission .eyebrow--negative {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--eyebrow-negative);
}

.about-page .about-mission h2 {
  color: #fff;
  font-size: clamp(2.2rem, 3.2vw, 3.05rem);
}

.about-page .about-mission h2 > span {
  color: var(--cyan);
}

.about-mission__copy {
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 2px solid var(--amber);
}

.about-mission__copy p {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.78;
}

.about-mission__copy p + p {
  margin-top: 1.25rem;
}

.about-principles {
  --about-principles-background: #faf8f2;
  background: var(--about-principles-background);
}

.about-principles__inner,
.about-gallery__inner,
.about-faq__inner {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.about-section-heading {
  max-width: 870px;
}

.about-section-heading__intro {
  max-width: 860px;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.78;
}

.about-section-heading--centred {
  margin-inline: auto;
  text-align: center;
}

.about-principles .feature-introduction__grid .feature-card,
.families-promises .feature-introduction__grid .feature-card,
.schools-promises .feature-introduction__grid .feature-card {
  display: grid;
  grid-template-rows: 50px 4.75rem 1fr;
  align-content: start;
  justify-content: stretch;
  gap: 1.25rem;
}

.about-principles .feature-introduction__grid .feature-card > div,
.families-promises .feature-introduction__grid .feature-card > div,
.schools-promises .feature-introduction__grid .feature-card > div {
  display: contents;
}

.about-principles .feature-introduction__grid .feature-card h3,
.about-principles .feature-introduction__grid .feature-card p,
.families-promises .feature-introduction__grid .feature-card h3,
.families-promises .feature-introduction__grid .feature-card p,
.schools-promises .feature-introduction__grid .feature-card h3,
.schools-promises .feature-introduction__grid .feature-card p {
  align-self: start;
}

.about-principles .feature-introduction__grid .feature-card p,
.families-promises .feature-introduction__grid .feature-card p,
.schools-promises .feature-introduction__grid .feature-card p {
  margin-top: 0;
}

.about-foundation {
  background: linear-gradient(122deg, #eef9fb 0%, var(--surface) 70%);
}

.about-foundation__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.about-page .about-foundation h2 > span {
  color: var(--red);
}

.about-foundation__content > p:not(.eyebrow) {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.78;
}

.about-foundation__content .about-text-link {
  margin-top: 1.15rem;
}

.about-foundation__visual {
  width: min(100%, 680px);
  margin: 1.5rem 0 0;
  justify-self: end;
}

.about-foundation__visual > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

.about-foundation__ecosystem {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) 0.85rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.15rem, 0.55vw, 0.4rem);
  margin-top: clamp(1rem, 2vw, 1.35rem);
}

.about-foundation__component {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.48rem;
  color: var(--ink);
  font-size: clamp(0.64rem, 0.84vw, 0.76rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.24;
  text-align: center;
}

.about-foundation__component-icon {
  display: grid;
  width: clamp(44px, 4.7vw, 54px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  box-shadow: 0 9px 18px rgba(32, 35, 79, 0.12);
}

.about-foundation__component-icon img {
  display: block;
  width: 52%;
  height: 52%;
  border-radius: 3px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.about-foundation__component--indigo .about-foundation__component-icon {
  background: var(--card-indigo);
}

.about-foundation__component--amber .about-foundation__component-icon {
  background: var(--card-amber);
}

.about-foundation__component--cyan .about-foundation__component-icon {
  background: var(--card-cyan);
}

.about-foundation__component--red .about-foundation__component-icon {
  background: var(--card-red);
}

.about-foundation__separator {
  display: grid;
  width: 100%;
  height: clamp(44px, 4.7vw, 54px);
  place-items: center;
  color: var(--indigo);
}

.about-foundation__separator .fa-icon {
  width: 0.55rem;
  height: 0.55rem;
}

.about-gallery {
  background: var(--surface-warm);
}

.about-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: clamp(90px, 12.4vw, 160px);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
}

.about-gallery figure {
  position: relative;
  grid-column: span 1;
  margin: 0;
  overflow: visible;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(36, 40, 82, 0.07);
}

.about-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #fff;
  clip-path: inset(0 round 22px);
  color: #fff;
  cursor: zoom-in;
}

.about-gallery__open:focus-visible {
  outline: 4px solid var(--focus-ring);
  outline-offset: -4px;
}

.about-gallery figure:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.about-gallery__open > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  transition: transform 220ms ease;
}

.about-gallery__open:hover > img,
.about-gallery__open:focus-visible > img {
  transform: scale(1.018);
}

.about-gallery__view-cue {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 0;
  place-items: center;
  align-items: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(15, 18, 48, 0.16);
  color: var(--indigo-deep);
}

.about-gallery__view-cue .fa-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.about-gallery figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.about-page .about-gallery h2 > span {
  color: var(--cyan);
}

.about-lightbox {
  width: min(94vw, var(--lightbox-width, 1500px));
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #fff;
}

.about-lightbox::backdrop {
  background: rgba(15, 18, 48, 0.88);
}

.about-lightbox__surface {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #111329;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}

.about-lightbox figure {
  margin: 0;
}

.about-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94vh - 66px);
  object-fit: contain;
}

.about-lightbox figcaption {
  position: relative;
  z-index: 1;
  min-height: 58px;
  margin: -5px 0 0;
  padding: 1rem 4.75rem 1rem 1.25rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
}

.about-lightbox__close {
  position: absolute;
  z-index: 3;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: rgba(32, 35, 79, 0.9);
  color: #fff;
  cursor: pointer;
  place-items: center;
}

.about-lightbox__close:hover {
  background: var(--indigo);
}

.about-lightbox__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.about-lightbox__close .fa-icon {
  width: 1rem;
  height: 1rem;
}

.about-lightbox__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(32, 35, 79, 0.88);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}

.about-lightbox__nav:hover {
  background: var(--indigo);
}

.about-lightbox__nav--previous {
  left: 1rem;
}

.about-lightbox__nav--previous .fa-icon {
  transform: rotate(180deg);
}

.about-lightbox__nav--next {
  right: 1rem;
}

.about-lightbox__nav .fa-icon {
  width: 0.95rem;
  height: 0.95rem;
}

body.lightbox-open {
  overflow: hidden;
}

.builder-lightbox .about-lightbox__surface {
  max-height: 94vh;
  overflow: auto;
  background: #fff;
}

.builder-lightbox img {
  max-height: 62vh;
  background: #fff;
}

.builder-lightbox figcaption {
  margin-top: 0;
  padding: 1rem 1.25rem 1.2rem;
}

.builder-lightbox figcaption h2 {
  margin: 0 3.5rem 0.85rem 0;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.25;
}

.about-lightbox--packaging-fit {
  width: min(94vw, calc(141vh - 87px), 1536px);
}

.about-lightbox--packaging-fit img {
  width: 100%;
  height: auto;
  max-height: none;
}

.builder-lightbox__numbered-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

html[data-display-mode="calm"] .builder-lightbox .about-lightbox__surface,
html[data-display-mode="calm"] .builder-lightbox figcaption {
  background: var(--builder-surface, #f4efe5);
}

html[data-display-mode="calm"] .builder-lightbox img {
  filter: saturate(0.58) contrast(0.92) brightness(0.98);
}

@media (max-width: 620px) {
  .builder-lightbox img {
    max-height: 52vh;
  }

  .builder-lightbox__numbered-list {
    grid-template-columns: 1fr;
  }
}

.about-faq {
  background: var(--surface);
}

.about-faq__list {
  max-width: 940px;
  margin: clamp(2.75rem, 5vw, 4.5rem) auto 0;
  border-top: 1px solid var(--line);
}

.about-faq details {
  border-bottom: 1px solid var(--line);
}

.about-faq summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  color: var(--indigo-deep);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.about-faq summary::-webkit-details-marker {
  display: none;
}

.about-faq summary:hover {
  color: var(--indigo);
}

.about-faq__control {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--indigo);
}

.about-faq__control .fa-icon {
  width: 0.85rem;
  height: 0.85rem;
  grid-area: 1 / 1;
}

.about-faq__control .fa-icon--minus,
.about-faq details[open] .about-faq__control .fa-icon--plus {
  display: none;
}

.about-faq details[open] .about-faq__control .fa-icon--minus {
  display: inline-block;
}

.about-faq details > p {
  max-width: 800px;
  margin: -0.2rem 0 0;
  padding: 0 4.5rem 1.5rem 0.25rem;
  color: var(--muted);
  line-height: 1.75;
}

html[data-display-mode="calm"] .about-hero,
html[data-display-mode="calm"] .about-story,
html[data-display-mode="calm"] .about-gallery,
html[data-display-mode="calm"] .about-faq {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .about-principles {
  --about-principles-background: #f4f2ed;
}

html[data-display-mode="calm"] .about-foundation {
  background: var(--surface-soft);
}

html[data-display-mode="calm"] .about-mission::before,
html[data-display-mode="calm"] .about-mission::after {
  display: none;
}

html[data-display-mode="calm"] .about-hero__visual img,
html[data-display-mode="calm"] .about-story__visual img,
html[data-display-mode="calm"] .about-foundation__visual > img,
html[data-display-mode="calm"] .about-gallery figure {
  box-shadow: none;
}

html[data-display-mode="calm"] .about-foundation__component-icon {
  box-shadow: none;
}

html[data-display-mode="calm"] .about-story__family-photo {
  box-shadow: 0 8px 18px rgba(29, 35, 82, 0.1);
}

@media (max-width: 1080px) {
  .about-story__inner,
  .about-foundation__inner {
    grid-template-columns: 1fr;
  }

  .about-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
  }

  .about-hero__content,
  .about-story__content,
  .about-foundation__content {
    max-width: 760px;
  }

  .about-foundation__visual {
    width: min(100%, 640px);
    margin-top: 0;
    justify-self: start;
  }

  .about-story__visual {
    width: min(100%, 360px);
    justify-self: start;
  }

}

@media (max-width: 820px) {
  .about-hero__inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .about-hero__content {
    max-width: 680px;
  }

  .about-hero__visual {
    min-height: 0;
  }

  .about-hero__visual img {
    transform: none;
  }

  .about-mission__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
  }

  .about-mission .eyebrow--negative {
    grid-column: auto;
    margin-bottom: -1.15rem;
  }

  .about-mission__copy {
    padding: 1.5rem 0 0;
    border-top: 2px solid var(--amber);
    border-left: 0;
  }

  .about-gallery__grid {
    width: 100%;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
  }

  .about-gallery figure,
  .about-gallery figure:first-child {
    width: 100%;
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }

  .about-gallery__open,
  .about-gallery__open > img {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .about-page main h2 {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }

  .about-story__inner,
  .about-foundation__inner {
    gap: 2.5rem;
    padding-block: 4rem;
  }

  .about-hero__inner {
    gap: 2rem;
    padding-block: 3rem;
  }

  .about-hero {
    background:
      radial-gradient(circle at 112% 7%, rgba(89, 194, 222, 0.075) 0 6.5rem, transparent 6.6rem),
      radial-gradient(circle at 1% 95%, rgba(245, 171, 31, 0.085) 0 6rem, transparent 6.1rem),
      linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
  }

  .about-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .about-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-hero__actions .button,
  .about-hero__text-link {
    width: 100%;
    justify-content: center;
  }

  .about-foundation__visual > img {
    border-radius: 20px;
  }

  .about-foundation__ecosystem {
    grid-template-columns: repeat(4, minmax(0, 1fr) 0.55rem) minmax(0, 1fr);
    gap: 0.12rem;
  }

  .about-foundation__component {
    font-size: 0.61rem;
  }

  .about-foundation__component-icon {
    width: 42px;
    border-radius: 12px;
  }

  .about-foundation__separator {
    height: 42px;
  }

  .about-foundation__separator .fa-icon {
    width: 0.42rem;
    height: 0.42rem;
  }

  .about-hero__visual {
    max-width: 480px;
    margin-inline: auto;
  }

  .about-story__visual img {
    border-radius: 22px;
  }

  .about-story__family-photo {
    right: -0.4rem;
    bottom: -0.7rem;
    width: 112px;
    border-radius: 13px;
  }

  .about-story__family-photo img {
    border-radius: 9px;
  }

  .about-lightbox__nav {
    width: 44px;
    height: 44px;
  }

  .about-lightbox__nav--previous {
    left: 0.55rem;
  }

  .about-lightbox__nav--next {
    right: 0.55rem;
  }

  .about-principles__inner,
  .about-gallery__inner,
  .about-faq__inner {
    padding-block: 4rem;
  }

  .about-faq summary {
    min-height: 68px;
    gap: 1rem;
    padding-block: 1rem;
  }

  .about-faq__control {
    width: 34px;
    height: 34px;
  }

  .about-faq details > p {
    padding-right: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .button:hover {
    transform: none;
  }
}

/* Contact page */
.contact-page main h2,
.contact-page main h3 {
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  letter-spacing: -0.02em;
}

.contact-page main p {
  text-wrap: pretty;
}

.contact-main {
  background: var(--surface-soft);
}

.contact-main > .container {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.contact-introduction {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}

.contact-section-heading {
  max-width: 820px;
  margin-bottom: 0;
}

.contact-section-heading h2 {
  max-width: 760px;
  font-size: clamp(2.65rem, 5vw, 4.65rem);
  font-weight: 700;
  line-height: 1.08;
}

.contact-section-heading h2 > span {
  color: var(--red);
}

.contact-section-heading > p:not(.eyebrow) {
  max-width: 760px;
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.contact-section-heading > p + p {
  margin-top: 0.65rem;
}

.contact-social-card {
  align-self: start;
  padding: clamp(1.25rem, 2.6vw, 1.8rem);
  border: 1px solid rgba(74, 79, 158, 0.32);
  border-radius: var(--radius-lg);
  background: transparent;
}

.contact-page main .contact-social-card h3 {
  margin: 0 0 1.55rem;
  color: var(--indigo);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.25;
}

.contact-social-card__links {
  display: grid;
  gap: 0.55rem;
}

.contact-social-card__links a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.25rem 0.45rem 0.25rem 0.25rem;
  border-radius: 999px;
  color: var(--indigo);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.contact-social-card__links a:hover {
  background: rgba(74, 79, 158, 0.08);
}

.contact-social-card__links a:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.contact-social-card__icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}

.contact-social-card__icon .fa-icon {
  width: 17px;
  height: 17px;
}

.contact-social-card__icon--indigo {
  background: var(--indigo);
}

.contact-social-card__icon--amber {
  background: var(--amber);
  color: #20234f;
}

.contact-social-card__icon--red {
  background: var(--red);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-form,
.contact-details {
  border-radius: var(--radius-lg);
}

.contact-form {
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.contact-form__heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contact-form__heading h3,
.contact-details h3 {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.2;
}

.contact-form__heading p,
.contact-details header > p:not(.eyebrow) {
  margin: 0.4rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.contact-form__heading-icon,
.contact-details__icon,
.contact-details__response-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
}

.contact-form__heading-icon {
  width: 54px;
  height: 54px;
}

.contact-form__heading-icon img,
.contact-details__icon img,
.contact-details__response-icon img {
  width: 45%;
  height: 45%;
  border-radius: 3px;
  filter: brightness(0) invert(1);
}

.contact-form__heading-icon--indigo,
.contact-details__icon--indigo {
  background: var(--card-indigo);
}

.contact-details__icon--amber {
  background: var(--card-amber);
}

.contact-details__icon--cyan {
  background: var(--card-cyan);
}

.contact-details__icon--red {
  background: var(--card-red);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

.form-field {
  min-width: 0;
}

.form-field--wide {
  grid-column: 1 / -1;
}

.form-field > label,
.form-options > legend {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

.form-field__optional {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1.5px solid #8b8ea1;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field select {
  min-height: 54px;
  padding: 0.72rem 0.9rem;
}

.form-field textarea {
  min-height: 176px;
  padding: 0.85rem 0.9rem;
  line-height: 1.55;
  resize: vertical;
}

.form-field input[type="text"]:hover,
.form-field input[type="email"]:hover,
.form-field select:hover,
.form-field textarea:hover,
.form-field input[type="text"]:focus-visible,
.form-field input[type="email"]:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--indigo);
}

.form-options {
  min-width: 0;
  margin: 0;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.form-options > legend {
  padding-inline: 0.35rem;
}

.form-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

.form-options label,
.form-consent label {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.45;
}

.form-options label {
  padding: 0.48rem 0.55rem;
  border-radius: 10px;
}

.form-options label:hover {
  background: rgba(89, 194, 222, 0.13);
}

.form-options input,
.form-consent input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0.13rem 0 0;
  accent-color: var(--indigo);
}

.form-consent {
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--hero-label-surface);
}

.form-consent label {
  min-height: 40px;
  align-items: center;
  transform: translateY(1px);
}

.form-consent input {
  margin-top: 0;
}

.contact-form__submit {
  min-width: min(100%, 240px);
  margin-top: 1.65rem;
  border: 0;
  cursor: pointer;
}

.contact-form__status {
  display: grid;
  gap: 0.2rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--indigo);
  border-radius: var(--radius-sm);
  background: var(--hero-label-surface);
  color: var(--ink);
}

.contact-form__status[data-status="error"],
.contact-form__status[data-status="invalid"] {
  border-color: var(--red);
  background: rgba(232, 64, 64, 0.08);
}

.contact-details {
  position: sticky;
  top: 126px;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--footer-surface);
  box-shadow: var(--shadow-soft);
  color: #fff;
}

.contact-details .eyebrow {
  color: var(--eyebrow-negative);
}

.contact-page .contact-details h3,
.contact-details header > p:not(.eyebrow) {
  color: #fff;
}

.contact-details header > p:not(.eyebrow) {
  opacity: 1;
}

.contact-details__list {
  display: grid;
  gap: 0;
  margin: 1.65rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-details__list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  padding-block: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-details__icon {
  width: 48px;
  height: 48px;
}

.contact-details__list strong {
  display: block;
  margin-bottom: 0.12rem;
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-details__list a {
  color: #fff;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-underline-offset: 0.22em;
}

.contact-details address {
  color: rgba(255, 255, 255, 0.88);
  font-style: normal;
  line-height: 1.55;
}

.contact-details__response {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
}

.contact-details__response-icon {
  width: 34px;
  height: 34px;
  background: var(--amber);
}

.contact-details__response p {
  margin: 0;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.55;
}

.contact-details__faq {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.15rem;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  text-underline-offset: 0.24em;
}

.contact-details__faq .fa-icon {
  color: var(--cyan);
}

html[data-display-mode="calm"] .contact-main {
  background: var(--surface-soft);
}

html[data-display-mode="calm"] .contact-form,
html[data-display-mode="calm"] .contact-details,
html[data-display-mode="calm"] .contact-social-card {
  box-shadow: none;
}

html[data-display-mode="calm"] .contact-social-card {
  border-color: rgba(74, 79, 158, 0.42);
}

html[data-display-mode="calm"] .form-options,
html[data-display-mode="calm"] .form-consent {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .contact-details {
  background: var(--footer-surface);
}

/* Calm mode deliberately softens photographic and product imagery while
   leaving logos, interface icons and visual communication symbols crisp. */
.hero__visual img,
.hardware-gallery__item img,
.software-section__image-frame > img,
.real-life__image-frame > img,
.about-hero__visual > img,
.about-story__visual > img,
.about-foundation__visual > img,
.about-gallery__open > img {
  transition: filter 220ms ease;
}

html[data-display-mode="calm"] .hero__visual img,
html[data-display-mode="calm"] .hardware-gallery__item img,
html[data-display-mode="calm"] .software-section__image-frame > img,
html[data-display-mode="calm"] .real-life__image-frame > img,
html[data-display-mode="calm"] .about-hero__visual > img,
html[data-display-mode="calm"] .about-story__visual > img,
html[data-display-mode="calm"] .about-foundation__visual > img,
html[data-display-mode="calm"] .about-gallery__open > img {
  filter: saturate(0.58) contrast(0.9) brightness(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual img,
  .hardware-gallery__item img,
  .software-section__image-frame > img,
  .real-life__image-frame > img,
  .about-hero__visual > img,
  .about-story__visual > img,
  .about-foundation__visual > img,
  .about-gallery__open > img {
    transition: none;
  }
}

@media (max-width: 960px) {
  .contact-introduction,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-introduction {
    align-items: start;
    gap: 2rem;
  }

  .contact-social-card {
    max-width: 520px;
  }

  .contact-details {
    position: static;
  }

  .contact-details__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .contact-page main h2 {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }

  .contact-main > .container {
    padding-block: 4rem;
  }

  .contact-form,
  .contact-details,
  .contact-social-card {
    border-radius: var(--radius-md);
  }

  .contact-form {
    padding: 1.25rem;
  }

  .contact-form__heading {
    align-items: flex-start;
  }

  .contact-form__grid,
  .form-options__grid,
  .contact-details__list {
    grid-template-columns: 1fr;
  }

  .contact-form__submit {
    width: 100%;
  }
}

/* Privacy choices --------------------------------------------------------- */

.privacy-banner {
  position: fixed;
  right: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 400;
  display: grid;
  width: min(calc(100% - 40px), var(--container));
  max-height: calc(100vh - 32px);
  padding: clamp(1rem, 2.4vw, 1.4rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  overflow-y: auto;
  border: 2px solid var(--indigo);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 18px 54px rgba(32, 35, 79, 0.22);
  color: var(--ink);
  transform: translateX(-50%);
}

.privacy-banner[hidden] {
  display: none;
}

.privacy-banner h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.privacy-banner p {
  max-width: 730px;
  margin: 0.45rem 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
}

.privacy-banner a,
.privacy-dialog a {
  color: var(--indigo);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.privacy-banner__actions,
.privacy-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.privacy-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1rem;
  border: 2px solid var(--indigo);
  border-radius: 999px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

.privacy-button--choice {
  background: var(--indigo);
  color: #fff;
}

.privacy-button--quiet {
  background: var(--surface);
  color: var(--indigo);
}

.privacy-button:hover {
  border-color: var(--indigo-dark);
  background: var(--indigo-dark);
  color: #fff;
}

.privacy-button:focus-visible,
.privacy-dialog__close:focus-visible,
.privacy-switch input:focus-visible + span,
.footer-cookie-settings:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.privacy-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--ink);
}

.privacy-dialog::backdrop {
  background: rgba(24, 27, 62, 0.64);
}

.privacy-dialog__panel {
  max-height: calc(100vh - 32px);
  padding: clamp(1.25rem, 4vw, 2rem);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.privacy-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.privacy-dialog__header p {
  margin: 0 0 0.28rem;
  color: var(--eyebrow-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.privacy-dialog__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.privacy-dialog__close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--indigo);
  cursor: pointer;
}

.privacy-dialog__close img {
  width: 15px;
  height: 17px;
  filter: invert(29%) sepia(21%) saturate(2303%) hue-rotate(198deg) brightness(91%) contrast(88%);
}

.privacy-dialog__intro,
.privacy-dialog__assurance {
  color: var(--ink);
  line-height: 1.6;
}

.privacy-dialog__intro {
  margin: 1rem 0 1.25rem;
}

.privacy-categories {
  display: grid;
  gap: 0.75rem;
}

.privacy-category {
  display: grid;
  padding: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
}

.privacy-category h3,
.privacy-category strong {
  margin: 0;
  color: var(--indigo);
  font-size: 1rem;
  line-height: 1.35;
}

.privacy-category p {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.5;
}

.privacy-category__status {
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--indigo);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.privacy-switch {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 34px;
  flex: 0 0 auto;
  cursor: pointer;
}

.privacy-switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.privacy-switch > span:last-child {
  width: 100%;
  height: 100%;
  border: 2px solid #74788d;
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.privacy-switch > span:last-child::after {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #74788d;
  content: "";
  transition: background-color 160ms ease, transform 160ms ease;
}

.privacy-switch input:checked + span {
  border-color: var(--indigo);
  background: var(--indigo);
}

.privacy-switch input:checked + span::after {
  background: #fff;
  transform: translateX(20px);
}

.privacy-dialog__assurance {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 2px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  font-size: 0.84rem;
  font-weight: 800;
}

.privacy-dialog__actions {
  margin-top: 1.25rem;
}

body.privacy-dialog-open {
  overflow: hidden;
}

body.privacy-banner-visible .contact-dock {
  bottom: calc(18px + var(--privacy-notice-offset, 0px));
}

.footer-cookie-settings {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.cookie-table-wrapper {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.cookie-table {
  width: 100%;
  min-width: 610px;
  border-collapse: collapse;
  text-align: left;
}

.cookie-table th,
.cookie-table td {
  padding: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
  vertical-align: top;
}

.cookie-table th {
  background: var(--surface-warm);
  color: var(--indigo);
  font-weight: 700;
}

.cookie-table tr:last-child td {
  border-bottom: 0;
}

.cookie-status {
  display: inline-flex;
  margin-top: 0.4rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-warm);
  color: var(--indigo);
  font-size: 0.72rem;
  font-weight: 700;
}

html[data-display-mode="calm"] .privacy-banner,
html[data-display-mode="calm"] .privacy-dialog__panel {
  box-shadow: none;
}

html[data-display-mode="calm"] .privacy-dialog::backdrop {
  background: rgba(41, 44, 63, 0.72);
}

@media (max-width: 900px) {
  .privacy-banner {
    grid-template-columns: 1fr;
  }

  .privacy-banner__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .privacy-banner {
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(calc(100% - 28px), var(--container));
    max-height: calc(100vh - 20px);
    padding: 1rem;
    border-radius: 16px;
  }

  .privacy-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .privacy-banner__actions .privacy-button--quiet {
    grid-column: 1 / -1;
  }

  .privacy-button {
    min-height: 48px;
    padding-inline: 0.75rem;
  }

  .privacy-dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
  }

  .privacy-dialog__panel {
    max-height: calc(100vh - 20px);
    padding: 1.15rem;
    border-radius: var(--radius-md);
  }

  .privacy-category {
    align-items: start;
  }

  .privacy-dialog__actions .privacy-button {
    flex: 1 1 auto;
  }

  body.privacy-banner-visible .contact-dock {
    bottom: calc(12px + var(--privacy-notice-offset, 0px));
  }

  .footer-legal {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-switch > span:last-child,
  .privacy-switch > span:last-child::after {
    transition: none;
  }
}

/* Families page */

.families-page main h1,
.families-page main h2,
.families-page main h3 {
  font-family: "Inter", Arial, sans-serif;
}

.families-page main h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.2rem, 3.45vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.families-page main p {
  text-wrap: pretty;
}

.families-hero {
  --hero-cyan-position: 98%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--hero-cyan-position) 9%, rgba(89, 194, 222, 0.09) 0 10.5rem, transparent 10.6rem),
    radial-gradient(circle at 5% 92%, rgba(245, 171, 31, 0.1) 0 9rem, transparent 9.1rem),
    linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
}

.families-hero__inner {
  display: grid;
  min-height: clamp(600px, 66vh, 760px);
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(3.75rem, 7vw, 6.75rem);
}

.families-hero__content {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.families-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  max-width: 390px;
  margin: 0 0 1.2rem;
  padding: 0.4rem 1rem 0.4rem 0.42rem;
  border-radius: 999px;
  background: var(--hero-label-surface);
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.families-hero__label-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--hero-label-icon-surface);
}

.families-hero__label-icon img {
  width: 27px;
  height: auto;
}

.families-hero h1 {
  max-width: 650px;
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.families-hero h1 > span {
  color: var(--amber);
}

.families-hero__lead {
  max-width: 580px;
  margin: 1.4rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  font-weight: 700;
  line-height: 1.35;
}

.families-hero__copy {
  max-width: 590px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.families-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin-top: 1.8rem;
}

.families-hero__text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.2rem;
  color: var(--indigo);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

.families-hero__text-link:hover {
  color: var(--indigo-deep);
}

.families-hero__audience {
  max-width: 590px;
  margin: 1.45rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.families-hero__visual {
  display: flex;
  align-self: start;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  margin: 74px 0 0;
}

.families-hero__visual img,
.family-companion__visual img,
.family-growing__visual img {
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.5vw, 22px);
}

.families-hero__visual img {
  width: min(100%, 680px);
}

.families-promises .feature-introduction__title-stop {
  color: var(--red);
}

.family-adaptation,
.family-companion,
.family-feature-directory,
.family-specifications {
  background: var(--surface);
}

.family-adaptation__inner,
.family-safety__inner,
.family-companion__inner,
.family-growing__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.family-adaptation__inner {
  align-items: start;
}

.family-adaptation__content > p:not(.eyebrow),
.family-safety__content > p:not(.eyebrow),
.family-companion__content > p:not(.eyebrow),
.family-growing__content > p:not(.eyebrow),
.family-section-header > p:not(.eyebrow),
.family-specifications__header > p:not(.eyebrow) {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.76;
}

.family-adaptation h2 > span {
  color: var(--cyan);
}

.family-tick-list,
.family-companion__features {
  display: grid;
  gap: 0.72rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.family-tick-list li,
.family-companion__features li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--muted);
  line-height: 1.55;
}

.family-tick-list li::before,
.family-companion__features li::before {
  position: absolute;
  top: 0.62em;
  left: 0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--cyan);
  content: "";
}

.family-adaptation__controls {
  display: grid;
  gap: 0;
  border-block: 1px solid var(--line);
}

.family-slider {
  --family-slider-stop-inset: clamp(2rem, 4.3vw, 2.75rem);
  --family-slider-label-inset: calc(var(--family-slider-stop-inset) + 0.3rem);
  --family-slider-thumb-radius: 13px;
  padding-block: clamp(1.55rem, 3vw, 2.15rem);
}

.family-slider + .family-slider {
  border-top: 1px solid var(--line);
}

.family-slider__heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.family-slider__heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.family-slider__heading h3 {
  margin: 0;
  color: var(--indigo);
  font-size: 1.2rem;
  line-height: 1.3;
}

.family-control-group__icon,
.family-mode-row__icon,
.family-review-flow__icon,
.family-growing__points article > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
}

.family-control-group__icon {
  width: 44px;
  height: 44px;
}

.family-control-group__icon img,
.family-mode-row__icon img,
.family-review-flow__icon img,
.family-growing__points article > span img,
.family-privacy-assurance > span img {
  width: 52%;
  height: 52%;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.family-control-group__icon--indigo,
.family-review-flow__icon--indigo {
  background: var(--card-indigo);
}

.family-control-group__icon--cyan,
.family-review-flow__icon--cyan {
  background: var(--card-cyan);
}

.family-slider__input {
  width: calc(100% - ((var(--family-slider-stop-inset) - var(--family-slider-thumb-radius)) * 2));
  height: 28px;
  margin: 1.35rem calc(var(--family-slider-stop-inset) - var(--family-slider-thumb-radius)) 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.family-slider__input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo) 0 var(--family-range-progress, 50%), color-mix(in srgb, var(--indigo) 18%, var(--surface)) var(--family-range-progress, 50%) 100%);
}

.family-slider__input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--indigo) 18%, var(--surface));
}

.family-slider__input::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--indigo);
}

.family-slider__input::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -9px;
  appearance: none;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--indigo);
}

.family-slider__input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--indigo);
}

.family-slider__input:focus-visible {
  border-radius: 999px;
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-ring);
}

.family-slider__labels {
  position: relative;
  min-height: 1.2em;
  margin: 0.25rem var(--family-slider-label-inset) 0;
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 700;
}

.family-slider__labels span {
  position: absolute;
  top: 0;
  width: max-content;
  max-width: 7rem;
  text-align: center;
  transform: translateX(-50%);
}

.family-slider__labels span:nth-child(1) {
  left: 0;
}

.family-slider__labels span:nth-child(2) {
  left: 50%;
}

.family-slider__labels span:nth-child(3) {
  left: 100%;
}

.family-slider__description {
  min-height: 3.2em;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.family-routines,
.family-growing {
  background: var(--surface-soft);
}

.family-routines__inner,
.family-feature-directory__inner,
.family-specifications__inner,
.family-options__inner {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.family-section-header,
.family-specifications__header {
  max-width: 820px;
}

.family-routines h2 > span,
.family-options h2 > span {
  color: var(--amber);
}

.family-routine-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.family-routine-flow li {
  --routine-accent: var(--indigo);
  min-width: 0;
  padding: 1.5rem 1.35rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--routine-accent) 34%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface);
}

.family-routine-flow li:nth-child(2) {
  --routine-accent: var(--amber);
}

.family-routine-flow li:nth-child(3) {
  --routine-accent: var(--cyan);
}

.family-routine-flow li:nth-child(4) {
  --routine-accent: var(--red);
}

.family-routine-flow__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  background: var(--routine-accent);
}

.family-routine-flow__icon img {
  width: 23px;
  height: 23px;
  filter: brightness(0) invert(1);
}

.family-routine-flow h3,
.family-mode-row h3,
.family-review-flow h3,
.family-growing__points h3 {
  margin: 0.95rem 0 0;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.3;
}

.family-routine-flow p,
.family-mode-row p,
.family-review-flow p,
.family-growing__points p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.family-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.family-mode-row article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--muted) 46%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface);
}

.family-mode-row__icon {
  width: 48px;
  height: 48px;
}

.family-mode-row__icon--amber {
  background: var(--card-amber);
}

.family-mode-row__icon--indigo {
  background: var(--card-indigo);
}

.family-mode-row h3 {
  margin-top: 0;
}

.family-safety {
  background: var(--surface-warm);
}

.family-safety h2 > span,
.family-feature-directory h2 > span {
  color: var(--red);
}

.family-safety__inner {
  align-items: start;
}

.family-safety__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.35rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--red);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
}

.family-safety__note > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--red);
}

.family-safety__note img {
  width: 21px;
  height: 21px;
  filter: brightness(0) invert(1);
}

.family-safety__note p {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.5;
}

.family-safety__visual {
  min-width: 0;
  margin: 1.55rem 0 0;
}

.family-safety__visual figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(14px, 1.5vw, 22px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.family-safety__visual figure img {
  display: block;
  width: 100%;
  height: auto;
}

.family-review-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin: 1.1rem 0 0;
  padding: 0.2rem clamp(0.35rem, 1.4vw, 0.9rem) 0;
}

.family-review-flow__item {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.family-review-flow__icon {
  width: 48px;
  height: 48px;
}

.family-review-flow__icon--amber {
  background: var(--card-amber);
}

.family-review-flow__plus {
  display: grid;
  width: 24px;
  height: 48px;
  align-self: center;
  place-items: center;
}

.family-review-flow__plus img {
  width: 13px;
  height: 13px;
  filter: brightness(0) saturate(100%) invert(31%) sepia(20%) saturate(2138%) hue-rotate(197deg) brightness(90%);
}

.family-review-flow h3 {
  margin-top: 0.65rem;
  text-align: center;
}

@media (min-width: 821px) {
  .family-safety__inner {
    align-items: stretch;
  }

  .family-safety__content {
    display: flex;
    padding-bottom: 0.9rem;
    flex-direction: column;
  }

  .family-safety__note {
    margin-top: auto;
  }
}

.family-companion__visual-column,
.family-companion__visual,
.family-growing__visual {
  align-self: start;
}

.family-companion__visual {
  margin: 1.75rem 0 0;
}

.family-growing__visual {
  margin: 1.55rem 0 0;
}

.family-companion h2 > span {
  color: var(--cyan);
}

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

.family-privacy-assurance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.family-privacy-assurance > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: var(--indigo);
}

.family-privacy-assurance p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.55;
}

.family-companion__store-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.family-companion__store-badge {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  border-radius: 8px;
}

.family-companion__store-badge--coming-soon {
  filter: grayscale(1);
  opacity: 0.38;
}

.family-companion__store-link img {
  width: auto;
  height: clamp(43px, 14vw, 56px);
  border-radius: 0;
}

.family-companion__content > p.family-companion__ios-note {
  margin: 0.35rem 0 0;
  color: var(--body-text, #5b5e72);
  font-size: clamp(0.72rem, 0.9vw, 0.78rem);
  line-height: 1.45;
  text-align: right;
}

.family-growing h2 > span {
  color: var(--amber);
}

.family-growing__points {
  display: grid;
  gap: 1rem;
  margin-top: 1.8rem;
}

.family-growing__points article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.family-growing__points article > span {
  width: 48px;
  height: 48px;
  background: var(--indigo);
}

.family-growing__points article:nth-child(2) > span {
  background: var(--red);
}

.family-growing__points article:nth-child(3) > span {
  background: var(--amber);
}

.family-growing__points h3 {
  margin-top: 0;
}

.family-growing__visual {
  display: grid;
  gap: 1rem;
}

.family-growing__visual-main {
  display: block;
}

.family-growing__keyboard-image {
  display: block;
  overflow: hidden;
  border: clamp(4px, 0.5vw, 6px) solid #fff;
  border-radius: clamp(12px, 1.35vw, 18px);
  background: #fff;
  box-shadow: 0 12px 26px rgba(31, 37, 77, 0.14);
}

.family-growing__keyboard-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(7px, 0.8vw, 12px);
}

.family-feature-directory__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.family-feature-directory details {
  --directory-accent: var(--indigo);
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.family-feature-directory details[open] {
  align-self: stretch;
}

.family-feature-directory details:nth-child(4n + 2) {
  --directory-accent: var(--amber);
}

.family-feature-directory details:nth-child(4n + 3) {
  --directory-accent: var(--cyan);
}

.family-feature-directory details:nth-child(4n + 4) {
  --directory-accent: var(--red);
}

.family-feature-directory summary {
  position: relative;
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 4rem 0.75rem 0.9rem;
  color: var(--indigo);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.family-feature-directory summary::-webkit-details-marker {
  display: none;
}

.family-feature-directory summary::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--indigo) 13%, var(--surface));
  background-image: url("../assets/icons/font-awesome/plus.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
  content: "";
  filter: none;
  transform: translateY(-50%);
}

.family-feature-directory details[open] summary::after {
  background-image: url("../assets/icons/font-awesome/minus.svg");
}

.family-feature-directory__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--directory-accent) 15%, var(--surface));
}

.family-feature-directory__icon img {
  width: 19px;
  height: 19px;
  filter: invert(31%) sepia(20%) saturate(2138%) hue-rotate(197deg) brightness(90%);
  object-fit: contain;
}

.family-feature-directory details:nth-child(4n + 2) .family-feature-directory__icon img {
  filter: invert(76%) sepia(97%) saturate(1198%) hue-rotate(342deg) brightness(99%) contrast(94%);
}

.family-feature-directory details:nth-child(4n + 3) .family-feature-directory__icon img {
  filter: invert(71%) sepia(36%) saturate(958%) hue-rotate(152deg) brightness(91%) contrast(90%);
}

.family-feature-directory details:nth-child(4n + 4) .family-feature-directory__icon img {
  filter: invert(37%) sepia(90%) saturate(1960%) hue-rotate(338deg) brightness(92%) contrast(96%);
}

.family-feature-directory summary:focus-visible {
  border-radius: var(--radius-md);
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.family-feature-directory details ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0 1.3rem 1.3rem 2.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.family-specifications {
  background: var(--surface-soft);
}

.family-specifications h2 > span {
  color: var(--cyan);
}

.family-specifications__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.family-specifications__grid > div {
  min-width: 0;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.family-specifications__grid dt {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 0.75rem;
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.family-specifications__grid dd {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.family-specifications__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
}

.family-specifications__icon img {
  width: 27px;
  height: 27px;
  filter: invert(31%) sepia(20%) saturate(2138%) hue-rotate(197deg) brightness(90%);
  object-fit: contain;
}

.family-specifications__grid > div:nth-child(4n + 2) .family-specifications__icon img {
  filter: invert(76%) sepia(97%) saturate(1198%) hue-rotate(342deg) brightness(99%) contrast(94%);
}

.family-specifications__grid > div:nth-child(4n + 3) .family-specifications__icon img {
  filter: invert(71%) sepia(36%) saturate(958%) hue-rotate(152deg) brightness(91%) contrast(90%);
}

.family-specifications__grid > div:nth-child(4n + 4) .family-specifications__icon img {
  filter: invert(37%) sepia(90%) saturate(1960%) hue-rotate(338deg) brightness(92%) contrast(96%);
}

.family-options {
  background: var(--indigo-dark);
}

.family-options .family-section-header h2,
.family-options .family-section-header > p:not(.eyebrow) {
  color: #fff;
}

.family-options__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.family-option-card {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.family-option-card__topline {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.family-option-card__mark {
  display: inline-flex;
  width: 2.25rem;
  height: 1.65rem;
  flex: 0 0 2.25rem;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.family-option-card__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.family-option-card__mark--butterfly img {
  width: auto;
  height: 1.65rem;
}

.family-option-card__mark--jigsaw {
  width: 2.5rem;
  height: 1.65rem;
  flex-basis: 2.5rem;
  color: var(--red);
  fill: currentColor;
}

.family-option-card__mark--ecosystem {
  width: 3rem;
  height: 2.25rem;
  flex-basis: 3rem;
  background: var(--amber);
  -webkit-mask: url("../assets/brand/eletron-puzzle-diamond-pale-complete.png") center / contain no-repeat;
  mask: url("../assets/brand/eletron-puzzle-diamond-pale-complete.png") center / contain no-repeat;
}

.family-option-card--device {
  border-color: var(--cyan);
}

.family-option-card--connected {
  border-color: var(--red);
}

.family-option-card--highlight {
  border-color: var(--amber);
}

.family-option-card__type {
  margin: 0;
  color: var(--indigo);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.family-option-card h3 {
  min-height: 3rem;
  margin: 0.65rem 0 0;
  color: var(--indigo);
  font-size: 1.35rem;
  line-height: 1.25;
}

.family-option-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.22rem;
  margin: 0.65rem 0;
  color: var(--ink);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.family-option-card__price span {
  color: var(--indigo);
  font-size: 0.9rem;
  font-weight: 700;
  vertical-align: top;
}

.family-option-card:not(.family-option-card--device) .family-option-card__price span {
  color: var(--ink);
  font-size: 2.2rem;
  line-height: 1;
}

.family-option-card__price small {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.family-option-card__summary {
  display: flex;
  min-height: 2.5rem;
  align-items: flex-start;
  margin: 0;
  color: var(--indigo);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.family-option-card__includes {
  color: var(--indigo);
  font-weight: 700;
}

.family-option-card ul {
  display: grid;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.family-option-card li strong {
  color: var(--ink);
  font-weight: 750;
}

@media (min-width: 1180px) {
  .family-option-card__summary {
    white-space: nowrap;
  }

  .family-option-card__summary--device {
    white-space: normal;
  }
}

.family-option-card__status {
  margin: auto 0 0;
  padding: 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  color: var(--indigo);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.family-package-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  margin-top: 1.5rem;
  padding: clamp(1.35rem, 2.8vw, 2rem);
  border: 2px solid var(--brand-indigo);
  border-radius: var(--radius-lg);
  background: #e7e8ed;
  box-shadow: 0 16px 36px rgba(18, 20, 52, 0.16);
  color: var(--ink);
}

.family-package-finder__choices {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.family-package-finder__choice {
  display: grid;
  width: 2.85rem;
  aspect-ratio: 1;
  border: 1px solid rgba(37, 40, 70, 0.12);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.82);
  place-items: center;
}

.family-package-finder__choice::before {
  display: block;
  width: 1.2rem;
  aspect-ratio: 1;
  background: var(--brand-indigo);
  content: "";
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.family-package-finder__choice--tablet::before {
  -webkit-mask-image: url("../assets/icons/font-awesome/tablet-screen-button.svg");
  mask-image: url("../assets/icons/font-awesome/tablet-screen-button.svg");
}

.family-package-finder__choice--connection::before {
  -webkit-mask-image: url("../assets/icons/font-awesome/wifi.svg");
  mask-image: url("../assets/icons/font-awesome/wifi.svg");
}

.family-package-finder__choice--support::before {
  -webkit-mask-image: url("../assets/icons/font-awesome/hands-holding-child.svg");
  mask-image: url("../assets/icons/font-awesome/hands-holding-child.svg");
}

.family-package-finder__plus {
  color: var(--indigo-dark);
  font-size: 1.1rem;
  font-weight: 700;
}

.family-package-finder__content h3 {
  margin: 0;
  color: var(--brand-indigo);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.15;
}

.family-package-finder__content h3 span {
  color: var(--red);
}

.family-package-finder__content p {
  max-width: 620px;
  margin: 0.55rem 0 0;
  color: var(--ink);
  line-height: 1.55;
}

.family-package-finder__actions {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 0.65rem;
}

.family-package-finder__primary {
  background: var(--brand-indigo);
  color: #fff;
}

.family-package-finder__primary:hover {
  background: var(--indigo-deep);
}

.family-package-finder__secondary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--indigo-deep);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.family-package-finder__secondary:hover {
  text-decoration-thickness: 2px;
}

.family-package-finder__secondary .fa-icon {
  width: 0.8rem;
  height: 0.8rem;
}

.family-options__mission {
  width: 100%;
  max-width: none;
  margin: 1.5rem 0 0;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.7;
  text-align: left;
}

html[data-display-mode="calm"] .family-package-finder {
  border-color: var(--brand-indigo);
  background: #dededa;
  box-shadow: none;
}

html[data-display-mode="calm"] .families-hero {
  background: var(--surface-warm);
}

/* Temporary pages used while the remaining Eletron sections are developed. */

.coming-soon-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.coming-soon-page > main:not([hidden]) {
  flex: 1 0 auto;
}

.coming-soon {
  position: relative;
  display: grid;
  min-height: clamp(430px, 58vh, 660px);
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 102% 7%, rgba(89, 194, 222, 0.09) 0 10rem, transparent 10.1rem),
    radial-gradient(circle at -2% 96%, rgba(245, 171, 31, 0.09) 0 9rem, transparent 9.1rem),
    var(--surface-warm);
}

.coming-soon__inner {
  padding-block: clamp(5rem, 10vw, 8rem);
  text-align: center;
}

.coming-soon__page-name {
  margin: 0 0 0.8rem;
  color: var(--eyebrow-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.coming-soon h1 {
  margin: 0;
  color: var(--indigo);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.coming-soon__dots {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(0.65rem, 1.25vw, 1rem);
  margin: clamp(1.7rem, 3vw, 2.35rem) auto 0;
}

.coming-soon__dots span {
  display: block;
  width: clamp(15px, 1.8vw, 21px);
  aspect-ratio: 1;
  border-radius: 50%;
}

.coming-soon__dots span:nth-child(1) {
  background: var(--brand-indigo);
}

.coming-soon__dots span:nth-child(2) {
  background: var(--brand-amber);
}

.coming-soon__dots span:nth-child(3) {
  background: var(--cyan);
}

.coming-soon__dots span:nth-child(4) {
  background: var(--red);
}

html[data-display-mode="calm"] .coming-soon {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .families-hero__visual img,
html[data-display-mode="calm"] .family-safety__visual img,
html[data-display-mode="calm"] .family-companion__visual img,
html[data-display-mode="calm"] .family-growing__visual img {
  filter: saturate(0.72) brightness(0.96) contrast(0.96);
}

@media (max-width: 1080px) {
  .families-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
  }

  .family-routine-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .families-hero__inner,
  .family-adaptation__inner,
  .family-safety__inner,
  .family-companion__inner,
  .family-growing__inner {
    grid-template-columns: 1fr;
  }

  .families-hero__inner {
    min-height: auto;
    gap: 2.5rem;
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .families-hero__content {
    max-width: 680px;
  }

  .families-hero__visual {
    justify-content: flex-start;
    margin-top: 0;
  }

  .family-adaptation__inner,
  .family-safety__inner,
  .family-companion__inner,
  .family-growing__inner {
    gap: 3rem;
  }

  .family-companion__visual-column {
    order: 2;
  }

  .family-companion__visual {
    margin-top: 0;
  }

  .family-companion__content {
    order: 1;
  }

  .family-growing__visual {
    margin-top: 0;
  }

  .family-review-flow {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.65rem;
  }

  .family-review-flow__item {
    display: flex;
    gap: 0;
  }

  .family-review-flow__plus {
    display: grid;
  }

  .family-review-flow h3 {
    margin-top: 0.65rem;
  }

  .family-feature-directory__groups {
    grid-template-columns: 1fr;
  }

  .family-options__grid {
    grid-template-columns: 1fr;
  }

  .family-option-card {
    min-height: 0;
  }

  .family-option-card h3,
  .family-option-card__summary {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .families-page main h2 {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }

  .families-hero {
    background:
      radial-gradient(circle at 112% 7%, rgba(89, 194, 222, 0.075) 0 6.5rem, transparent 6.6rem),
      radial-gradient(circle at 1% 95%, rgba(245, 171, 31, 0.085) 0 6rem, transparent 6.1rem),
      linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
  }

  .families-hero__inner {
    gap: 2rem;
    padding-block: 3rem;
  }

  .families-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .families-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .families-hero__actions .button,
  .families-hero__text-link {
    width: 100%;
    justify-content: center;
  }

  .family-adaptation__inner,
  .family-safety__inner,
  .family-companion__inner,
  .family-growing__inner,
  .family-routines__inner,
  .family-feature-directory__inner,
  .family-specifications__inner,
  .family-options__inner {
    padding-block: 4rem;
  }

  .family-routine-flow,
  .family-mode-row,
  .family-companion__features,
  .family-specifications__grid {
    grid-template-columns: 1fr;
  }

  .family-package-finder {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .family-package-finder__actions .button {
    width: 100%;
  }

  html[data-display-mode="calm"] .families-hero {
    background: var(--surface-warm);
  }
}

/* Schools page */
.schools-page main h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.5rem, 4.25vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.schools-hero {
  --hero-cyan-position: 98%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--hero-cyan-position) 9%, rgba(89, 194, 222, 0.09) 0 10.5rem, transparent 10.6rem),
    radial-gradient(circle at 5% 92%, rgba(245, 171, 31, 0.1) 0 9rem, transparent 9.1rem),
    linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
}

.schools-hero__inner {
  display: grid;
  min-height: clamp(600px, 66vh, 760px);
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(3.75rem, 7vw, 6.75rem);
}

.schools-hero__content {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.schools-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  max-width: 390px;
  margin: 0 0 1.2rem;
  padding: 0.4rem 1rem 0.4rem 0.42rem;
  border-radius: 999px;
  background: var(--hero-label-surface);
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.schools-hero__label-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--hero-label-icon-surface);
}

.schools-hero__label-icon img {
  width: 27px;
  height: auto;
}

.schools-hero h1 {
  max-width: 650px;
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.schools-hero h1 > span {
  color: var(--amber);
}

.schools-hero__lead {
  max-width: 580px;
  margin: 1.4rem 0 0;
  color: var(--indigo);
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  font-weight: 700;
  line-height: 1.35;
}

.schools-hero__copy {
  max-width: 590px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.schools-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin-top: 1.8rem;
}

.schools-hero__text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.2rem;
  color: var(--indigo);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

.schools-hero__text-link:hover {
  color: var(--indigo-deep);
}

.schools-hero__audience {
  max-width: 590px;
  margin: 1.45rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.schools-hero__visual {
  display: flex;
  align-self: start;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  margin: 74px 0 0;
}

.schools-hero__visual img,
.school-day__visual img,
.school-venues__visuals img {
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.5vw, 22px);
}

.schools-hero__visual img {
  width: min(100%, 680px);
}

.schools-promises .feature-introduction__title-stop {
  color: var(--red);
}

.school-day,
.school-partnership {
  background: var(--surface);
}

.school-tools,
.school-venues {
  background: var(--surface-warm);
}

.school-day__inner,
.school-partnership__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: start;
  gap: clamp(3rem, 7vw, 6.5rem);
  padding-block: clamp(5rem, 9vw, 8.25rem);
}

.school-day__content > p:not(.eyebrow),
.school-partnership__content > p:not(.eyebrow),
.school-section-header > p:not(.eyebrow) {
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.school-day h2 > span {
  color: var(--cyan);
}

.school-day__visual-column {
  margin: 1.55rem 0 0;
}

.school-day__visual {
  margin: 0;
}

.school-app-strip {
  display: grid;
  grid-template-columns: minmax(128px, 0.72fr) minmax(0, 2.28fr);
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
  box-shadow: 0 16px 35px -32px rgba(32, 35, 79, 0.42);
}

.school-app-strip__intro h3 {
  margin: 0;
  color: var(--indigo);
  font-size: 0.98rem;
  line-height: 1.25;
}

.school-app-strip__intro p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.42;
}

.school-app-strip__apps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-app-strip__apps li {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.38rem;
  color: var(--indigo-deep);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
}

.school-app-strip__apps img {
  display: block;
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  border: 1px solid rgba(74, 79, 158, 0.12);
  border-radius: 11px;
  object-fit: cover;
}

.school-app-strip__note {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: right;
}

.school-check-list {
  display: grid;
  gap: 0.72rem;
  margin: 1.75rem 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.school-check-list li {
  position: relative;
  padding-left: 1.75rem;
}

.school-check-list li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--cyan);
  content: "";
  transform: translateY(-50%);
}

.school-tools__inner {
  padding-block: clamp(5rem, 9vw, 8.25rem);
}

.school-section-header {
  max-width: 800px;
}

.school-tools h2 > span {
  color: var(--amber);
}

.school-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.school-tool-card {
  min-height: 250px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 16px 35px -32px rgba(32, 35, 79, 0.42);
}

.school-tool-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 14px;
}

.school-tool-card__icon img {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  filter: brightness(0) invert(1);
}

.school-tool-card--indigo .school-tool-card__icon {
  background: var(--brand-indigo);
}

.school-tool-card--amber .school-tool-card__icon {
  background: var(--brand-amber);
}

.school-tool-card--cyan .school-tool-card__icon {
  background: var(--cyan);
}

.school-tool-card--red .school-tool-card__icon {
  background: var(--red);
}

.school-tool-card h3 {
  margin: 1.25rem 0 0;
  color: var(--indigo);
  font-size: 1.22rem;
  line-height: 1.3;
}

.school-tool-card p {
  margin: 0.7rem 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.school-partnership__inner {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
}

.school-partnership h2 > span {
  color: var(--red);
}

.school-planning-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}

.school-planning-list article {
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.school-planning-list article > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-indigo);
}

.school-planning-list article:nth-child(2) > span {
  background: var(--brand-amber);
}

.school-planning-list article:nth-child(3) > span {
  background: var(--red);
}

.school-planning-list article > span img {
  width: 21px;
  height: 21px;
  filter: brightness(0) invert(1);
}

.school-planning-list h3 {
  margin: 1rem 0 0;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.3;
}

.school-planning-list p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.school-contact-card {
  --jigsaw-notch-top: 6.25rem;
  position: relative;
  overflow: hidden;
  padding: 2rem;
  margin-top: 1.55rem;
  border-radius: var(--radius-md);
  background: var(--card-cyan);
  color: #252846;
  box-shadow: var(--shadow-soft);
}

.school-contact-card .jigsaw-card__notch,
.school-contact-card .jigsaw-card__notch use {
  color: #f4f4f6;
  fill: #f4f4f6;
}

.school-contact-card__portrait {
  width: 92px;
  height: 92px;
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  object-fit: cover;
}

.school-contact-card h3 {
  margin: 1.25rem 0 0;
  color: var(--indigo-deep);
  font-size: 1.45rem;
  line-height: 1.2;
}

.school-contact-card__role {
  margin: 0.35rem 0 0;
  color: var(--indigo-deep);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
}

.school-contact-card > p:not(.school-contact-card__role) {
  margin: 1.1rem 0 0;
  line-height: 1.62;
}

.school-contact-card__email {
  display: inline-block;
  color: var(--indigo-deep);
  font-weight: 700;
  text-underline-offset: 0.22em;
}

.school-contact-card__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.school-contact-card__linkedin {
  display: inline-flex;
  width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--indigo-deep);
  border-radius: 50%;
}

.school-contact-card__linkedin > span:first-child {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-indigo);
}

.school-contact-card__linkedin img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.school-venues h2 > span {
  color: var(--cyan);
}

.school-venues__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  align-items: start;
  column-gap: clamp(3rem, 7vw, 6.5rem);
  row-gap: clamp(2.5rem, 4vw, 3.75rem);
  padding-block: clamp(5rem, 9vw, 8.25rem);
}

.school-venues__content > p:not(.eyebrow) {
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.school-venues__partner {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.45rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 32px -30px rgba(32, 35, 79, 0.48);
}

.school-venues__partner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.school-venues__partner a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.25rem;
  border-radius: 9px;
}

.school-venues__partner a:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.school-venues__partner img {
  display: block;
  width: 118px;
  height: auto;
}

.school-venue-benefits {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-venue-benefits li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  min-height: 158px;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 16px 34px -30px rgba(32, 35, 79, 0.48);
}

.school-venue-benefits__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
}

.school-venue-benefits__icon--indigo {
  background: var(--brand-indigo);
}

.school-venue-benefits__icon--amber {
  background: var(--amber);
}

.school-venue-benefits__icon--cyan {
  background: var(--cyan);
}

.school-venue-benefits__icon--red {
  background: var(--red);
}

.school-venue-benefits__icon img {
  width: 19px;
  height: 19px;
  filter: brightness(0) invert(1);
}

.school-venue-benefits__icon--amber img {
  filter: brightness(0);
}

.school-venue-benefits h3 {
  margin: 0;
  color: var(--indigo);
  font-size: 1.02rem;
  line-height: 1.35;
}

.school-venue-benefits p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.school-venues__cta {
  width: auto;
  min-height: 50px;
  justify-content: center;
  margin: 0;
  border-color: var(--indigo);
  background: transparent;
  color: var(--indigo);
  text-align: center;
}

.school-venues__cta img {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(29%) sepia(23%) saturate(1903%) hue-rotate(198deg) brightness(93%) contrast(89%);
}

.school-venues__cta:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}

.school-venues__cta:hover img {
  filter: brightness(0) invert(1);
}

.school-venue-benefits li.school-venue-benefits__action {
  display: flex;
  min-height: 158px;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.school-venues__visuals {
  position: relative;
  min-height: 510px;
  margin-top: 2rem;
  padding: 0 0 4.5rem 4.25rem;
}

.school-venues__visual {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.5vw, 22px);
  box-shadow: 0 22px 50px -34px rgba(32, 35, 79, 0.5);
}

.school-venues__visual--primary {
  width: 92%;
  margin-left: auto;
}

.school-venues__visual--secondary,
.school-venues__visual--tertiary {
  position: absolute;
  bottom: -4px;
  width: 48%;
  border: 7px solid var(--surface-warm);
}

.school-venues__visual--secondary {
  left: 0;
}

.school-venues__visual--tertiary {
  right: 0;
}

.school-venues__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

html[data-display-mode="calm"] .schools-hero {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .schools-hero__visual img,
html[data-display-mode="calm"] .school-day__visual img,
html[data-display-mode="calm"] .school-venues__visuals img,
html[data-display-mode="calm"] .school-contact-card__portrait {
  filter: saturate(0.68) brightness(0.95) contrast(0.95);
}

html[data-display-mode="calm"] .school-tool-card,
html[data-display-mode="calm"] .school-planning-list article,
html[data-display-mode="calm"] .school-app-strip,
html[data-display-mode="calm"] .school-venue-benefits li,
html[data-display-mode="calm"] .school-venues__partner,
html[data-display-mode="calm"] .school-venues__visual {
  box-shadow: none;
}

html[data-display-mode="calm"] .school-app-strip__apps img {
  filter: saturate(0.68) brightness(0.96) contrast(0.95);
}

html[data-display-mode="calm"] .school-contact-card {
  background: var(--card-cyan);
  box-shadow: none;
}

@media (max-width: 1080px) {
  .schools-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
  }

  .school-tools__grid,
  .school-planning-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .school-partnership__inner {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  }

  .school-venue-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .schools-hero__inner,
  .school-day__inner,
  .school-partnership__inner,
  .school-venues__inner {
    grid-template-columns: 1fr;
  }

  .schools-hero__inner {
    min-height: auto;
    gap: 2.5rem;
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .schools-hero__content {
    max-width: 680px;
  }

  .schools-hero__visual {
    justify-content: flex-start;
    margin-top: 0;
  }

  .school-day__inner,
  .school-partnership__inner,
  .school-venues__inner {
    gap: 3rem;
  }

  .school-day__visual-column,
  .school-contact-card,
  .school-venues__visuals {
    margin-top: 0;
  }

  .school-contact-card {
    max-width: 520px;
  }

  .school-venues__visuals {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .schools-page main h2 {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }

  .schools-hero {
    background:
      radial-gradient(circle at 112% 7%, rgba(89, 194, 222, 0.075) 0 6.5rem, transparent 6.6rem),
      radial-gradient(circle at 1% 95%, rgba(245, 171, 31, 0.085) 0 6rem, transparent 6.1rem),
      linear-gradient(115deg, var(--surface-warm) 0%, #fff 65%);
  }

  .schools-hero__inner {
    gap: 2rem;
    padding-block: 3rem;
  }

  .schools-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .schools-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .schools-hero__actions .button,
  .schools-hero__text-link {
    width: 100%;
    justify-content: center;
  }

  .school-day__inner,
  .school-tools__inner,
  .school-partnership__inner,
  .school-venues__inner {
    padding-block: 4rem;
  }

  .school-tools__grid,
  .school-planning-list,
  .school-venue-benefits {
    grid-template-columns: 1fr;
  }

  .school-venue-benefits li.school-venue-benefits__action {
    min-height: 0;
  }

  .school-venues__cta {
    width: 100%;
  }

  .school-app-strip {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .school-app-strip__intro {
    max-width: 420px;
  }

  .school-app-strip__apps {
    gap: 0.45rem;
  }

  .school-app-strip__apps img {
    width: clamp(40px, 12vw, 54px);
    height: clamp(40px, 12vw, 54px);
  }

  .school-app-strip__note {
    text-align: left;
  }

  .school-venues__visuals {
    display: grid;
    gap: 1rem;
    padding: 0;
  }

  .school-venues__visual--primary,
  .school-venues__visual--secondary,
  .school-venues__visual--tertiary {
    position: static;
    width: 100%;
    border: 0;
    margin: 0;
  }

  .school-tool-card {
    min-height: 0;
  }

  .school-contact-card {
    max-width: none;
  }

  html[data-display-mode="calm"] .schools-hero {
    background: var(--surface-warm);
  }
}

/* Support page */
.support-hero h1 > span {
  color: var(--amber);
}

.support-hero__visual img {
  width: min(100%, 540px);
  box-shadow: 0 24px 52px -38px rgba(32, 35, 79, 0.58);
}

html[data-display-mode="calm"] .support-hero__visual img {
  box-shadow: none;
}

.support-jump-shell {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.support-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  padding-block: 1rem;
}

.support-jump a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 1rem;
  border: 1px solid rgba(74, 79, 158, 0.42);
  border-radius: 999px;
  background: var(--surface);
  color: var(--indigo);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.support-jump a:hover {
  border-color: var(--cyan);
  background: rgba(89, 194, 222, 0.12);
}

.support-page main h1,
.support-page main h2,
.support-page main h3 {
  font-family: "Inter", Arial, sans-serif;
}

.support-page main h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.2rem, 3.45vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.support-page main h2 > span {
  color: var(--amber);
}

.support-page .support-heading-dot--amber {
  color: var(--amber);
}

.support-page .support-heading-dot--red,
.support-page main h2 > .support-heading-dot--red {
  color: var(--red);
}

.support-page .support-heading-dot--cyan,
.support-page main h2 > .support-heading-dot--cyan {
  color: var(--cyan);
}

.support-page main p {
  text-wrap: pretty;
}

#get-support,
#faqs,
#ways-we-can-help,
#founder-families {
  scroll-margin-top: 0;
}

.support-section__inner {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.support-section-heading {
  max-width: 820px;
}

.support-help {
  background: var(--surface-soft);
}

.support-help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.support-help-card {
  --support-card-accent: var(--indigo);
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.35rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--support-card-accent) 34%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface);
}

.support-help-card:nth-child(2) {
  --support-card-accent: var(--cyan);
}

.support-help-card:nth-child(3) {
  --support-card-accent: var(--amber);
}

.support-card-icon,
.support-contact-card__icon,
.support-founder-benefits__icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: #fff;
}

.support-card-icon .fa-icon,
.support-contact-card__icon .fa-icon,
.support-founder-benefits__icon .fa-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.support-card-icon--indigo,
.support-contact-card__icon,
.support-founder-benefits__icon {
  background: var(--indigo);
}

.support-card-icon--cyan {
  background: var(--cyan);
}

.support-card-icon--amber {
  background: var(--amber);
  color: #fff;
}

.support-card-icon--red {
  background: var(--red);
}

.support-help-card h3,
.support-capability-card h3,
.support-contact-card h3,
.support-plan-overview h3,
.support-founder-route h3,
.support-founder-benefits h3,
.support-capabilities__note h3 {
  margin: 0.95rem 0 0;
  color: var(--indigo);
  font-size: 1.05rem;
  line-height: 1.3;
}

.support-help-card p,
.support-capability-card p,
.support-contact-card p,
.support-plan-overview p,
.support-founder-route p,
.support-founder-benefits p,
.support-capabilities__note p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.support-contact-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--muted) 46%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface);
}

.support-contact-card__icon {
  align-self: start;
}

.support-contact-card h3 {
  margin-top: 0;
}

.support-contact-card a:not(.button),
.support-faq details a {
  color: var(--indigo);
  font-weight: 700;
}

.support-contact-card__actions,
.support-founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.support-contact-card__actions {
  justify-content: flex-end;
}

.support-plan-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--muted) 46%, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface);
}

.support-plan-overview__intro h3 {
  margin-top: 0;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  letter-spacing: -0.02em;
}

.support-plan-overview .eyebrow {
  color: var(--indigo);
  font-size: 0.76rem;
  line-height: normal;
}

.support-plan-overview__button {
  margin-top: 1.1rem;
}

.support-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  color: var(--indigo);
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.support-text-link .fa-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.support-plan-overview__list {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-plan-overview__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.support-plan-overview__copy,
.support-plan-overview__copy strong,
.support-plan-overview__copy > span {
  display: block;
}

.support-plan-overview__copy strong {
  color: var(--indigo);
  font-size: 0.98rem;
}

.support-plan-overview__copy > span {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.support-plan-overview__icon {
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  background: var(--indigo);
}

.support-plan-overview__icon--connected {
  background: var(--amber);
}

.support-plan-overview__icon--empowered {
  background: var(--red);
}

.support-plan-overview__icon .fa-icon {
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
}

.support-capabilities {
  background: var(--surface-soft);
}

.support-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(3rem, 7vw, 7rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.support-capability-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  align-content: start;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
}

.support-capability-card h3 {
  margin-top: 0;
}

.support-capability-card p {
  margin-top: 0.5rem;
}

.support-capabilities__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.support-capabilities__note-icon {
  display: grid;
  width: 48px;
  height: 48px;
  align-self: start;
  place-items: center;
  border-radius: 13px;
  background: var(--indigo);
  color: #fff;
}

.support-capabilities__note-icon .fa-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.support-capabilities__note h3 {
  margin-top: 0;
  font-size: 1.15rem;
}

.support-capabilities__note .button {
  flex: 0 0 auto;
}

.support-founders {
  background: var(--indigo-dark);
}

.support-founders .support-section-heading h2,
.support-founders .support-section-heading > p:not(.eyebrow) {
  color: #fff;
}

.support-founder-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.support-founder-route {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.support-founder-route--founder {
  border-color: var(--amber);
}

.support-founder-route__heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  background: var(--surface-soft);
}

.support-founder-route--founder .support-founder-route__heading {
  border-bottom-color: color-mix(in srgb, var(--amber) 48%, var(--line));
}

.support-founder-route__heading > div {
  min-width: 0;
}

.support-founder-route h3 {
  margin: 0 0 0.04rem;
  font-size: 1.25rem;
}

.support-founder-route__body {
  flex: 1;
  padding: 1rem 1.25rem 1.25rem;
}

.support-founder-route__body p {
  margin: 0;
}

.support-founder-route .support-founder-route__label {
  margin: 0;
  color: var(--indigo) !important;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.support-founder-benefits {
  overflow: hidden;
  margin-top: 1rem;
  padding: 0;
  border: 2px solid var(--red);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.support-founder-benefits__heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--red) 34%, var(--line));
  background: var(--surface-soft);
}

.support-founder-benefits h3 {
  margin-top: 0;
  font-size: 1.25rem;
}

.support-founder-benefits__heading p {
  margin-top: 0.1rem;
}

.support-founder-benefits ul {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--ink);
  list-style: none;
}

.support-founder-benefits li {
  position: relative;
  padding: 0 0.35rem 0 1.25rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.support-founder-benefits li::before {
  position: absolute;
  top: 0.5rem;
  left: 0.1rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--red);
  content: "";
}

.support-founder-terms {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.support-founder-benefits__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--red) 20%, var(--line));
}

.support-founder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0;
}

.support-founder-actions .button--primary {
  background: var(--amber);
  color: var(--ink);
}

.support-founder-actions .button--outline {
  border-color: #fff;
  color: #fff;
}

.support-founder-actions .button--outline:hover {
  background: #fff;
  color: var(--indigo);
}

.support-page .button--outline {
  border-color: var(--indigo);
  color: var(--indigo);
}

.support-page .button--outline:hover {
  background: var(--indigo);
  color: #fff;
}

.support-page .support-founder-actions .button--outline {
  border-color: #fff;
  color: #fff;
}

.support-page .support-founder-actions .button--outline:hover {
  background: #fff;
  color: var(--indigo);
}

.support-page .support-founder-benefits .support-founder-actions .button--outline {
  border-color: var(--indigo);
  color: var(--indigo);
}

.support-page .support-founder-benefits .support-founder-actions .button--outline:hover {
  background: var(--indigo);
  color: #fff;
}

html[data-display-mode="calm"] .support-jump-shell,
html[data-display-mode="calm"] .support-help,
html[data-display-mode="calm"] .support-capabilities,
html[data-display-mode="calm"] .support-jump a,
html[data-display-mode="calm"] .support-help-card,
html[data-display-mode="calm"] .support-contact-card,
html[data-display-mode="calm"] .support-capabilities__note,
html[data-display-mode="calm"] .support-plan-overview__list li {
  background: var(--surface-warm);
  box-shadow: none;
}

html[data-display-mode="calm"] .support-plan-overview {
  background: var(--surface-warm);
}

html[data-display-mode="calm"] .support-founder-route,
html[data-display-mode="calm"] .support-founder-benefits {
  background: #f4f2ed;
  box-shadow: none;
}

html[data-display-mode="calm"] .support-founder-route__heading,
html[data-display-mode="calm"] .support-founder-benefits__heading {
  background: var(--surface-warm);
}

@media (max-width: 900px) {
  .support-plan-overview,
  .support-capabilities__note,
  .support-founder-benefits__footer {
    grid-template-columns: 1fr;
  }

  .support-contact-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .support-contact-card__actions {
    grid-column: 1 / -1;
  }

  .support-contact-card__actions {
    justify-content: flex-start;
  }

  .support-capabilities__note .button {
    justify-self: start;
  }

  .support-founder-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .support-jump {
    justify-content: flex-start;
  }

  .support-section__inner {
    padding-block: 4rem;
  }

  .support-help-grid,
  .support-capabilities__grid,
  .support-founder-routes,
  .support-founder-benefits ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .support-page main h2 {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }

  .support-jump a {
    flex: 1 1 calc(50% - 0.65rem);
  }

  .support-contact-card__actions,
  .support-founder-actions,
  .support-contact-card__actions .button,
  .support-founder-actions .button,
  .support-capabilities__note .button {
    width: 100%;
  }

  .support-contact-card__actions .button,
  .support-founder-actions .button,
  .support-capabilities__note .button {
    justify-content: center;
  }
}

/* Get Eletron opens as a compact purchase introduction. It deliberately
   avoids the height and decorative treatment of a traditional page hero. */
.purchase-intro {
  background: linear-gradient(115deg, var(--surface-warm) 0%, #fff 78%);
}

.purchase-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.purchase-intro .hero__label {
  margin-bottom: 1.1rem;
}

.purchase-intro h1 {
  max-width: 650px;
  margin: 0;
  color: var(--indigo);
  font-size: clamp(2.65rem, 4.15vw, 4rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.purchase-intro .hero__lead {
  max-width: 720px;
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  font-weight: 650;
  line-height: 1.42;
}

.purchase-intro .hero__copy {
  max-width: 720px;
  margin: 0.85rem 0 0;
  color: var(--body-text, #4f5268);
  font-size: 1rem;
  line-height: 1.65;
}

.purchase-intro .hero__actions {
  margin-top: 1.15rem;
}

.purchase-intro .hero__audience {
  margin-top: 0.8rem;
  font-size: 0.91rem;
}

html[data-display-mode="calm"] .purchase-intro {
  background: var(--surface-warm);
}

@media (max-width: 860px) {
  .purchase-intro__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .purchase-intro h1 {
    max-width: 760px;
  }
}

@media (max-width: 600px) {
  .purchase-intro__grid {
    gap: 1.25rem;
    padding-block: 2rem 2.5rem;
  }

  .purchase-intro .hero__label {
    margin-bottom: 0.9rem;
  }

  .purchase-intro h1 {
    font-size: clamp(2.35rem, 11vw, 3.15rem);
  }

  .purchase-intro .hero__actions {
    align-items: flex-start;
  }
}

/* Display and accessibility preferences */
.accessibility-dock {
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: 109;
  width: 76px;
  height: 76px;
}

body.has-accessibility-dock .contact-dock {
  bottom: 104px;
}

body.has-accessibility-dock .contact-toggle {
  display: flex;
}

body.privacy-banner-visible .accessibility-dock {
  bottom: calc(18px + var(--privacy-notice-offset, 0px));
}

body.privacy-banner-visible.has-accessibility-dock .contact-dock {
  bottom: calc(104px + var(--privacy-notice-offset, 0px));
}

.accessibility-toggle {
  display: inline-grid;
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  place-items: center;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 12px 28px rgba(32, 35, 79, 0.2);
  color: var(--indigo-deep);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.accessibility-toggle:hover {
  background: var(--indigo);
  box-shadow: 0 15px 32px rgba(32, 35, 79, 0.25);
  color: #fff;
  transform: translateY(-2px);
}

.accessibility-toggle:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.accessibility-toggle .fa-icon {
  width: 3.125rem;
  height: 3.125rem;
  background-color: currentColor;
}

@media (min-width: 1081px) {
  body.has-accessibility-dock .contact-dock {
    right: 18px;
  }

  .contact-toggle {
    width: 88px;
    min-width: 88px;
  }

  .contact-toggle__bubble {
    position: absolute;
    right: calc(100% + 10px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px) scale(0.96);
    transform-origin: right center;
    visibility: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .contact-toggle:hover .contact-toggle__bubble,
  .contact-toggle:focus-visible .contact-toggle__bubble,
  .contact-toggle[aria-expanded="true"] .contact-toggle__bubble {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
  }

  body.has-accessibility-dock.footer-controls-over-footer .accessibility-dock {
    bottom: 96px;
  }

  body.has-accessibility-dock.footer-controls-over-footer .contact-dock {
    bottom: 182px;
  }

  body.privacy-banner-visible.has-accessibility-dock.footer-controls-over-footer .accessibility-dock {
    bottom: calc(96px + var(--privacy-notice-offset, 0px));
  }

  body.privacy-banner-visible.has-accessibility-dock.footer-controls-over-footer .contact-dock {
    bottom: calc(182px + var(--privacy-notice-offset, 0px));
  }
}

.accessibility-dialog {
  inset: 0 auto 0 0;
  width: min(660px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.accessibility-dialog[open] {
  animation: accessibility-drawer-in 220ms ease-out both;
}

@keyframes accessibility-drawer-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.accessibility-dialog::backdrop {
  background: rgba(32, 35, 79, 0.68);
  backdrop-filter: blur(2px);
}

.accessibility-dialog:focus {
  outline: 0;
  box-shadow: none;
}

.accessibility-dialog__panel {
  height: 100%;
  max-height: none;
  padding: clamp(1.25rem, 4vw, 2rem);
  overflow-y: auto;
  background: var(--surface);
  box-shadow: 18px 0 45px rgba(25, 29, 73, 0.2);
}

.accessibility-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.accessibility-dialog__header p {
  margin: 0 0 0.3rem;
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.accessibility-dialog__header h2 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.accessibility-dialog__header h2 span {
  color: var(--red);
}

.accessibility-dialog__close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--indigo);
  cursor: pointer;
}

.accessibility-dialog__close:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}

.accessibility-dialog__close:focus-visible,
.accessibility-text-size input:focus-visible + span,
.accessibility-switch input:focus-visible + span,
.accessibility-action:focus-visible,
.accessibility-dialog__footer > a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.accessibility-dialog__close .fa-icon {
  width: 1rem;
  height: 1rem;
}

.accessibility-dialog__introduction {
  margin: 0.8rem 0 1.4rem;
  color: var(--muted);
  line-height: 1.65;
}

.accessibility-text-size {
  margin: 0;
  padding: 0;
  border: 0;
}

.accessibility-text-size legend {
  margin-bottom: 0.65rem;
  padding: 0;
  color: var(--indigo);
  font-size: 1rem;
  font-weight: 750;
}

.accessibility-text-size__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.accessibility-text-size label {
  position: relative;
  cursor: pointer;
}

.accessibility-text-size input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.accessibility-text-size label > span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--indigo);
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
}

.accessibility-text-size input:checked + span {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}

.accessibility-text-size label:nth-child(2) > span {
  font-size: 1.08em;
}

.accessibility-text-size label:nth-child(3) > span {
  font-size: 1.17em;
}

.accessibility-options-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.accessibility-option {
  display: grid;
  min-width: 0;
  min-height: 102px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}

.accessibility-option > span:first-child {
  display: flex;
  min-width: 0;
  min-height: 60px;
  flex-direction: column;
  justify-content: flex-start;
}

.accessibility-option strong,
.accessibility-option small {
  display: block;
}

.accessibility-option strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.25;
}

.accessibility-option small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.accessibility-switch {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

.accessibility-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.accessibility-switch > span {
  position: absolute;
  inset: 0;
  display: block;
  border: 2px solid var(--indigo);
  border-radius: 999px;
  background: var(--surface);
  transition: background-color 160ms ease;
}

.accessibility-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--indigo);
  content: "";
  transition: background-color 160ms ease, transform 160ms ease;
}

.accessibility-switch input:checked + span {
  background: var(--indigo);
}

.accessibility-switch input:checked + span::after {
  background: #fff;
  transform: translateX(20px);
}

.accessibility-dialog__device-note {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.accessibility-dialog__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.accessibility-dialog__footer > a {
  color: var(--indigo);
  font-size: 0.86rem;
  font-weight: 750;
  text-underline-offset: 0.18em;
}

.accessibility-dialog__actions {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.accessibility-action {
  display: inline-flex;
  flex: 1 1 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 2px solid var(--indigo);
  border-radius: 999px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.1;
  cursor: pointer;
}

.accessibility-action--quiet {
  background: var(--surface);
  color: var(--indigo);
}

.accessibility-action--confirm,
.accessibility-action:hover {
  background: var(--indigo);
  color: #fff;
}

body.accessibility-dialog-open {
  overflow: hidden;
}

html[data-text-size="large"] {
  font-size: 112.5%;
}

html[data-text-size="larger"] {
  font-size: 125%;
}

html[data-text-spacing="true"] body {
  letter-spacing: 0.035em;
  word-spacing: 0.1em;
}

html[data-text-spacing="true"] :where(p, li, dd, dt, label, input, textarea, select, button) {
  line-height: 1.75;
}

html[data-contrast="true"] {
  --body-text: var(--indigo-dark);
  --ink: var(--indigo-deep);
  --muted: var(--indigo-dark);
  --line: var(--brand-indigo);
  --surface-soft: #ffffff;
  --surface-warm: #ffffff;
  --header-surface: #ffffff;
  --shadow-soft: 0 0 0 2px rgba(74, 79, 158, 0.3);
}

html[data-underline-links="true"] :where(main, footer) a:not(.button):not([class*="button"]):not([role="button"]) {
  text-decoration: underline !important;
  text-decoration-thickness: 0.12em !important;
  text-underline-offset: 0.18em !important;
}

html[data-reduce-motion="true"] {
  scroll-behavior: auto !important;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

@media (max-width: 680px) {
  .accessibility-dialog {
    width: 100%;
  }

  .accessibility-dialog__panel {
    padding: 1.15rem;
  }

  .accessibility-options-list {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 1080px) {
  .accessibility-dock {
    right: 98px;
    bottom: 12px;
    width: 64px;
    height: 64px;
  }

  .accessibility-toggle {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }

  .accessibility-toggle .fa-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  body.has-accessibility-dock .contact-dock {
    bottom: 12px;
  }

  body.privacy-banner-visible .accessibility-dock {
    bottom: calc(12px + var(--privacy-notice-offset, 0px));
  }

  body.privacy-banner-visible.has-accessibility-dock .contact-dock {
    bottom: calc(12px + var(--privacy-notice-offset, 0px));
  }
}

@media (max-width: 420px) {
  .accessibility-text-size__choices {
    grid-template-columns: 1fr;
  }

  .accessibility-dialog__header h2 {
    font-size: 1.65rem;
  }
}