/* Match the comfortable 80% desktop browser-zoom density while preserving
   full-size mobile text and touch targets. This stylesheet is customer-only. */
@media (min-width: 64rem) {
  :root {
    font-size: 80%;
  }
}

.customer-header .ui-brand small {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-control);
}

.customer-header__actions,
.customer-gate__actions,
.customer-profile-card__actions,
.customer-profile-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.customer-main {
  min-block-size: calc(100dvb - var(--header-height));
}

.customer-gate {
  min-block-size: calc(100dvb - var(--header-height));
  display: grid;
  place-items: center;
  padding-block: var(--section-gap);
}

.customer-gate__card {
  inline-size: min(100% - var(--page-gutter) * 2, var(--container-reading));
  flex-direction: row;
  align-items: center;
  border-style: solid;
  box-shadow: var(--shadow-elevation-1);
}

.customer-gate__actions {
  margin-block-start: var(--space-3);
}

.customer-hero {
  position: relative;
  border-block-end: var(--border-width) solid var(--color-border-soft);
}

.customer-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -8rem;
  inset-block-end: -11rem;
  inline-size: 28rem;
  aspect-ratio: 1;
  border: var(--border-width) solid var(--color-primary-line);
  border-radius: 50%;
  opacity: .55;
  pointer-events: none;
}

.customer-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-12);
}

.customer-hero__copy {
  max-inline-size: var(--container-reading);
}

.customer-hero h1 {
  max-inline-size: 18ch;
}

.customer-catalog-jump {
  align-self: start;
}

.customer-profile-card {
  position: relative;
  overflow: hidden;
  border-inline-start: var(--space-1) solid var(--color-primary);
  background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
  box-shadow: var(--shadow-elevation-2);
}

.customer-profile-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-end: -4rem;
  inset-block-start: -5rem;
  inline-size: 11rem;
  aspect-ratio: 1;
  border: var(--border-width) solid var(--color-primary-line);
  border-radius: 50%;
  pointer-events: none;
}

.customer-profile-card > * {
  position: relative;
  z-index: 1;
}

.customer-profile-card__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6);
  border-block-end: var(--border-width) solid var(--color-border-soft);
}

.customer-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding-inline: var(--space-6);
}

.customer-profile-grid div {
  display: grid;
  grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--border-width) solid var(--color-border-soft);
}

.customer-profile-grid dt {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.customer-profile-grid dd {
  min-inline-size: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
  text-align: end;
}

.customer-profile-card__actions {
  justify-content: flex-end;
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.customer-profile-card > .ui-alert {
  margin-inline: var(--space-6);
  margin-block-end: var(--space-4);
}

.customer-profile-form {
  --stack-gap: var(--space-6);
  padding: 0 var(--space-6) var(--space-6);
  border-block-start: var(--border-width) solid var(--color-border-soft);
  padding-block-start: var(--space-6);
}

.customer-profile-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.customer-profile-form__actions {
  justify-content: flex-end;
}

.customer-ltr-input {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}

.customer-catalog {
  padding-block-start: var(--section-gap);
}

.customer-section-heading {
  max-inline-size: var(--container-reading);
  margin-block-end: 0;
}

.customer-product-commerce {
  inline-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-primary-line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--color-primary-soft), var(--color-surface));
}

.customer-product-commerce__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.customer-product-commerce__item + .customer-product-commerce__item {
  padding-block-start: var(--space-2);
  border-block-start: var(--border-width) solid var(--color-primary-line);
}

.customer-product-commerce__item > span:last-child {
  display: flex;
  flex-direction: column;
}

.customer-product-commerce__item strong {
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.customer-product-commerce__icon {
  inline-size: var(--space-8);
  block-size: var(--space-8);
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-primary-line);
  font-size: var(--text-caption);
}

.customer-footer {
  margin-block-start: 0;
}

@media (max-width: 39.99rem) {
  .customer-header .ui-brand small,
  .customer-sign-out {
    display: none;
  }

  .customer-header__actions {
    gap: var(--space-1);
  }

  .customer-header__actions .ui-button {
    padding-inline: var(--space-3);
  }

  .customer-profile-card__heading,
  .customer-profile-grid,
  .customer-profile-form {
    padding-inline: var(--space-4);
  }

  .customer-profile-grid div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .customer-profile-grid dd {
    text-align: start;
  }

  .customer-profile-card__actions {
    padding-inline: var(--space-4);
  }

  .customer-profile-card__actions .ui-button,
  .customer-profile-form__actions .ui-button,
  .customer-catalog-jump {
    inline-size: 100%;
  }
}

@media (min-width: 40rem) {
  .customer-profile-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .customer-hero__layout {
    grid-template-columns: minmax(0, .88fr) minmax(28rem, 1.12fr);
    gap: var(--space-16);
    min-block-size: calc(100dvb - var(--header-height));
    padding-block: var(--space-16);
  }
}

@media (forced-colors: active) {
  .customer-hero::after,
  .customer-profile-card::after {
    display: none;
  }
}

/* Premium verified-customer portal */
.customer-hero {
  isolation: isolate;
  min-block-size: 44rem;
  background:
    linear-gradient(90deg, transparent 0 35%, rgb(255 255 255 / .28) 54%, rgb(255 255 255 / .94) 73%, var(--color-surface) 100%),
    linear-gradient(to top, rgb(255 255 255 / .96), transparent 42%),
    url("/assets/design-system/hero-refinery.png") 28% center / cover no-repeat;
}

[dir="ltr"] .customer-hero {
  background:
    linear-gradient(270deg, transparent 0 35%, rgb(255 255 255 / .28) 54%, rgb(255 255 255 / .94) 73%, var(--color-surface) 100%),
    linear-gradient(to top, rgb(255 255 255 / .96), transparent 42%),
    url("/assets/design-system/hero-refinery.png") 72% center / cover no-repeat;
}

.customer-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(126deg, transparent 0 43%, rgb(255 255 255 / .36) 43% 43.2%, transparent 43.2%),
    radial-gradient(circle at 28% 44%, transparent 0 13rem, rgb(220 21 27 / .58) 13.05rem 13.16rem, transparent 13.22rem);
  pointer-events: none;
}

.customer-hero__layout {
  position: relative;
  align-items: start;
}

.customer-hero__copy {
  padding: var(--space-8);
  border: 1px solid rgb(255 255 255 / .76);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / .72);
  box-shadow: var(--shadow-elevation-1);
  backdrop-filter: blur(18px);
}

.customer-hero__copy::before {
  content: "♛";
  inline-size: var(--control-height);
  block-size: var(--control-height);
  display: grid;
  place-items: center;
  margin-block-end: calc(var(--space-3) * -1);
  border: 1px solid rgb(186 134 24 / .28);
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  font-size: var(--text-h3);
  box-shadow: 0 8px 20px rgb(186 134 24 / .14);
}

.customer-hero h1 {
  max-inline-size: 14ch;
  letter-spacing: -.035em;
}

.customer-catalog-jump { min-inline-size: 18rem; }

.customer-profile-card {
  border: 1px solid rgb(255 255 255 / .84);
  border-block-start: 3px solid var(--color-primary);
  background:
    linear-gradient(115deg, rgb(255 255 255 / .98), rgb(255 255 255 / .87)),
    repeating-linear-gradient(125deg, transparent 0 4rem, rgb(20 22 25 / .025) 4rem 4.08rem);
  backdrop-filter: blur(22px);
}

.customer-profile-card__heading::before {
  content: "✓";
  inline-size: var(--control-height);
  block-size: var(--control-height);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-surface);
  box-shadow: 0 10px 24px rgb(220 21 27 / .2);
}

.customer-profile-card__heading > div { margin-inline-end: auto; }
.customer-profile-grid div { padding-block: var(--space-4); }
.customer-profile-grid dd { font-weight: var(--weight-bold); }

.customer-catalog {
  padding-block: var(--section-gap);
  background:
    radial-gradient(circle at 88% 3%, rgb(220 21 27 / .08), transparent 22rem),
    repeating-linear-gradient(125deg, transparent 0 6rem, rgb(20 22 25 / .02) 6rem 6.06rem),
    linear-gradient(155deg, var(--color-surface-soft), var(--color-background));
}

.customer-product-commerce {
  border: 0;
  border-inline-start: 3px solid var(--color-primary);
  background: linear-gradient(145deg, var(--color-primary-soft), rgb(255 255 255 / .92));
  box-shadow: inset 0 0 0 1px var(--color-primary-line);
}

@media (max-width: 63.99rem) {
  .customer-hero {
    background:
      linear-gradient(to bottom, rgb(255 255 255 / .8), rgb(255 255 255 / .96)),
      url("/assets/design-system/hero-refinery.png") 32% center / cover no-repeat;
  }
  .customer-hero__copy { padding: var(--space-6); }
}

@media (min-width: 64rem) {
  .customer-hero__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    min-block-size: 49rem;
    padding-block: var(--space-12) var(--space-16);
  }
  .customer-hero__copy { grid-column: 1 / span 6; }
  .customer-profile-card { grid-column: 2 / 12; margin-block-start: var(--space-16); }
  [dir="ltr"] .customer-hero__copy { grid-column: 7 / span 6; }
}

/* Customer portal composition: private, verified and industrial. */
.customer-header {
  position: sticky;
  z-index: var(--z-header);
}

.customer-header .ui-nav-link[aria-current="page"] {
  color: var(--color-primary);
}

.customer-main {
  overflow: hidden;
  background: var(--color-background);
}

.customer-hero {
  isolation: isolate;
  min-block-size: 46rem;
  overflow: hidden;
  border-block-end: 0;
  background:
    linear-gradient(90deg, transparent 0 45%, rgb(255 255 255 / .22) 54%, rgb(255 255 255 / .86) 70%, rgb(255 255 255 / .98) 100%),
    linear-gradient(to top, rgb(255 255 255 / .78), transparent 32%),
    url("/assets/design-system/customer-hero-refinery.png") center / cover no-repeat;
}

[dir="ltr"] .customer-hero {
  background:
    linear-gradient(90deg, transparent 0 45%, rgb(255 255 255 / .22) 54%, rgb(255 255 255 / .86) 70%, rgb(255 255 255 / .98) 100%),
    linear-gradient(to top, rgb(255 255 255 / .78), transparent 32%),
    url("/assets/design-system/customer-hero-refinery.png") center / cover no-repeat;
}

.customer-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .55;
  background:
    linear-gradient(125deg, transparent 0 55%, rgb(255 255 255 / .4) 55% 55.14%, transparent 55.14%),
    linear-gradient(to right, transparent calc(100% - 1px), rgb(23 25 28 / .035) 0),
    linear-gradient(to bottom, transparent calc(100% - 1px), rgb(23 25 28 / .035) 0);
  background-size: 100% 100%, var(--space-8) var(--space-8), var(--space-8) var(--space-8);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .76), transparent 72%);
  pointer-events: none;
}

.customer-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-end: -8%;
  inline-size: 42%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  opacity: 1;
  background: linear-gradient(145deg, rgb(255 255 255 / .14), rgb(255 255 255 / .62));
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: none;
  pointer-events: none;
}

.customer-hero__layout {
  position: relative;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr);
  grid-template-areas: "art copy";
  align-items: center;
  gap: var(--space-8);
  min-block-size: 42rem;
  padding-block: var(--space-10) var(--space-16);
}

.customer-hero__copy {
  --stack-gap: var(--space-6);
  grid-area: copy;
  direction: rtl;
  text-align: right;
  max-inline-size: 37rem;
  padding: var(--space-8) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

[dir="ltr"] .customer-hero__copy {
  direction: ltr;
  text-align: left;
}

.customer-hero__copy::before {
  display: none;
  content: none;
}

.customer-hero__art-space {
  grid-area: art;
  min-block-size: 1px;
}

.customer-hero__status {
  inline-size: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgb(255 255 255 / .82);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .82);
  box-shadow: var(--shadow-elevation-1);
  backdrop-filter: blur(16px);
}

.customer-hero__status-mark {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: var(--weight-bold);
  box-shadow: var(--accent-glow);
}

.customer-hero__status > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}

.customer-hero__status small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.customer-hero__status strong {
  color: var(--color-primary);
  font-size: var(--text-small);
}

.customer-hero h1 {
  max-inline-size: 13ch;
  font-size: clamp(2.75rem, 2rem + 2.2vw, 4.3rem);
  line-height: 1.28;
  letter-spacing: -.045em;
}

.customer-hero h1 span,
.customer-hero h1 strong {
  display: block;
}

.customer-hero h1 strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.customer-hero__intro {
  max-inline-size: 47ch;
  color: var(--color-text-secondary);
  line-height: 1.95;
}

.customer-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.customer-catalog-jump {
  min-inline-size: 17rem;
}

.customer-catalog-jump__label {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .08rem;
  text-align: start;
}

.customer-catalog-jump__label strong {
  font: inherit;
  font-weight: var(--weight-bold);
}

.customer-catalog-jump__label small {
  font-size: .72em;
  font-weight: var(--weight-medium);
  opacity: .9;
}

.customer-hero__secure-note {
  position: relative;
  max-inline-size: 47ch;
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-primary-line);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.8;
}

.customer-account {
  position: relative;
  z-index: 2;
  margin-block-start: -5.5rem;
  padding-block-end: var(--space-12);
}

.customer-account::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4rem 0 0;
  background:
    radial-gradient(circle at 8% 4%, rgb(220 21 27 / .07), transparent 20rem),
    var(--pattern-industrial-lines),
    linear-gradient(160deg, var(--color-surface), var(--color-surface-soft));
  border-block-start: 1px solid rgb(255 255 255 / .8);
}

.customer-profile-card {
  max-inline-size: 82rem;
  margin-inline: auto;
  margin-block-start: 0;
  border: 1px solid rgb(255 255 255 / .9);
  border-block-start: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / .94);
  box-shadow: 0 24px 70px rgb(20 22 25 / .16);
  backdrop-filter: blur(24px);
}

.customer-profile-card::after {
  inset-inline-end: -5rem;
  inset-block-start: -6rem;
  inline-size: 15rem;
  border-color: rgb(220 21 27 / .14);
  box-shadow: 0 0 0 2.5rem rgb(220 21 27 / .025);
}

.customer-profile-card__heading {
  padding: var(--space-5) var(--space-8);
  border-block-end-color: var(--color-border-soft);
}

.customer-profile-card__heading::before {
  content: none;
  display: none;
}

.customer-profile-card__heading > div {
  margin-inline-end: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-primary);
}

.customer-profile-card__role {
  min-block-size: 2.25rem;
  padding-inline: var(--space-4);
  box-shadow: inset 0 0 0 1px var(--color-primary-line);
}

.customer-profile-card__body {
  display: grid;
  grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
  min-inline-size: 0;
}

.customer-access-summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  overflow: hidden;
  border-inline-end: 1px solid var(--color-border-soft);
  background:
    radial-gradient(circle at 90% 10%, rgb(220 21 27 / .14), transparent 9rem),
    linear-gradient(145deg, var(--color-primary-soft), rgb(255 255 255 / .96));
}

.customer-access-summary::after {
  content: "";
  position: absolute;
  inset-inline-end: -4rem;
  inset-block-end: -5rem;
  inline-size: 11rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-primary-line);
  border-radius: 50%;
}

.customer-access-summary__mark,
.customer-catalog__access > span,
.customer-footer__access > span {
  inline-size: var(--control-height-lg);
  block-size: var(--control-height-lg);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: var(--weight-bold);
  box-shadow: var(--accent-glow);
}

.customer-access-summary p {
  max-inline-size: 34ch;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.85;
}

.customer-profile-details {
  min-inline-size: 0;
  padding: var(--space-5) var(--space-8) var(--space-6);
}

.customer-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8);
  padding: 0;
}

.customer-profile-grid div {
  grid-template-columns: minmax(6.5rem, .7fr) minmax(0, 1.3fr);
  padding-block: var(--space-4);
}

.customer-profile-grid dd {
  font-weight: var(--weight-bold);
}

.customer-profile-card__actions {
  justify-content: flex-start;
  padding: var(--space-5) 0 0;
}

.customer-profile-card__actions .ui-button {
  min-inline-size: 10rem;
}

.customer-profile-card > .ui-alert {
  margin: var(--space-5) var(--space-8) 0;
}

.customer-profile-form {
  padding: var(--space-8);
  background: linear-gradient(145deg, var(--color-surface-soft), var(--color-surface));
}

.customer-catalog {
  position: relative;
  padding-block: var(--space-16) var(--section-gap);
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 3%, rgb(220 21 27 / .085), transparent 25rem),
    linear-gradient(125deg, transparent 0 62%, rgb(255 255 255 / .55) 62% 73%, transparent 73%),
    var(--pattern-industrial-lines),
    linear-gradient(155deg, var(--color-surface-soft), var(--color-background));
}

.customer-catalog::before {
  content: "";
  position: absolute;
  inset-inline-start: -12rem;
  inset-block-start: -16rem;
  inline-size: 34rem;
  aspect-ratio: 1;
  border: 1px solid rgb(220 21 27 / .12);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(220 21 27 / .018);
  pointer-events: none;
}

.customer-catalog__intro,
.customer-catalog .catalog-layout {
  position: relative;
  z-index: 1;
}

.customer-catalog__intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  align-items: end;
  gap: var(--space-8);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--color-border-soft);
}

.customer-section-heading {
  margin: 0;
}

.customer-section-heading h2 {
  max-inline-size: 24ch;
}

.customer-catalog__access {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-panel);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / .84);
  box-shadow: var(--shadow-elevation-1);
  backdrop-filter: blur(18px);
}

.customer-catalog__access p {
  margin: var(--space-1) 0 var(--space-2);
  line-height: 1.7;
}

.customer-catalog__access > span {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.customer-catalog .catalog-layout {
  gap: var(--space-6);
  padding-block: var(--space-8) 0;
}

.customer-catalog .catalog-controls {
  padding: var(--space-6);
  border: 1px solid rgb(255 255 255 / .92);
  border-block-start: 3px solid var(--color-primary);
  background: rgb(255 255 255 / .92);
  box-shadow: var(--shadow-elevation-2);
}

.customer-catalog .catalog-search {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.customer-catalog .catalog-search__actions .ui-button:first-child {
  min-inline-size: 7rem;
}

.customer-catalog .catalog-filters {
  gap: var(--space-3);
}

.customer-catalog .ui-control {
  background-color: rgb(255 255 255 / .94);
}

.customer-catalog .catalog-results__heading {
  align-items: center;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-primary);
  border-block-end: 0;
}

.customer-catalog .catalog-product-grid .ui-product-card {
  border: 1px solid rgb(255 255 255 / .94);
  border-block-start: 2px solid transparent;
  background: rgb(255 255 255 / .94);
  box-shadow: var(--shadow-elevation-1);
}

.customer-catalog .catalog-product-grid .ui-product-card__media {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 72%, rgb(220 21 27 / .06), transparent 46%),
    linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
}

.customer-catalog .catalog-product-grid .ui-product-card__media img {
  padding: var(--space-3);
}

.customer-catalog .catalog-product-grid .ui-product-card__body {
  align-items: flex-start;
  gap: var(--space-3);
  text-align: start;
}

.customer-catalog .catalog-product-grid .ui-product-card__taxonomy {
  inline-size: 100%;
  min-block-size: auto;
  justify-content: flex-start;
  text-align: start;
}

.customer-catalog .catalog-product-grid .ui-product-card__variant {
  text-align: start;
}

.customer-catalog .catalog-product-grid .ui-product-card__fact {
  align-items: flex-start;
}

.customer-catalog .catalog-product-grid .ui-product-card__cta {
  inline-size: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border-soft);
}

.customer-product-commerce {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-primary-line);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--color-primary-soft), rgb(255 255 255 / .96));
  box-shadow: none;
}

.customer-product-commerce__item {
  padding: var(--space-3);
}

.customer-product-commerce__item + .customer-product-commerce__item {
  padding-block-start: var(--space-3);
  border-block-start: 0;
  border-inline-start: 1px solid var(--color-primary-line);
}

.customer-product-commerce__icon {
  background: rgb(255 255 255 / .9);
}

@media (hover: hover) {
  .customer-catalog .catalog-product-grid .ui-product-card:hover {
    border-block-start-color: var(--color-primary);
    box-shadow: var(--shadow-elevation-2), var(--accent-glow-soft);
  }
}

.customer-footer {
  margin-block-start: 0;
  padding-block: var(--space-10);
  border-block-start: 3px solid var(--color-primary);
  background:
    radial-gradient(circle at 90% 10%, rgb(220 21 27 / .075), transparent 18rem),
    var(--pattern-industrial-lines),
    linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
  color: var(--color-text-primary);
  box-shadow: 0 -14px 40px rgb(20 22 25 / .06);
}

.customer-footer::after {
  border-color: rgb(220 21 27 / .1);
  box-shadow: 0 0 0 4rem rgb(220 21 27 / .02);
}

.customer-footer .ui-muted {
  color: var(--color-text-secondary);
}

.customer-footer .ui-link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.customer-footer .ui-link:hover {
  color: var(--color-primary);
}

.customer-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(15rem, 1.2fr) minmax(10rem, .65fr) minmax(18rem, 1fr) auto;
  align-items: start;
  gap: var(--space-8);
}

.customer-footer__brand .ui-brand small {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

.customer-footer__brand p {
  max-inline-size: 35ch;
  margin: 0;
}

.customer-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.customer-footer__access {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / .72);
}

.customer-footer__access > span {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: var(--text-caption);
}

.customer-footer__access p {
  max-inline-size: 34ch;
  margin: var(--space-1) 0 0;
  line-height: 1.7;
}

.customer-footer__language {
  justify-self: end;
}

@media (max-width: 63.99rem) {
  .customer-hero,
  [dir="ltr"] .customer-hero {
    min-block-size: auto;
    background:
      linear-gradient(to bottom, rgb(255 255 255 / .98) 0 52%, rgb(255 255 255 / .82) 64%, transparent 82%),
      url("/assets/design-system/customer-hero-refinery.png") 34% bottom / cover no-repeat;
  }

  .customer-hero::before {
    mask-image: linear-gradient(to bottom, transparent 0 48%, rgb(0 0 0 / .65) 100%);
  }

  .customer-hero::after {
    display: none;
  }

  .customer-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "art";
    gap: 0;
    min-block-size: auto;
    padding-block: var(--space-8) 0;
  }

  .customer-hero__copy {
    max-inline-size: 42rem;
    padding: var(--space-4) 0;
  }

  .customer-hero__art-space {
    min-block-size: 22rem;
  }

  .customer-account {
    margin-block-start: -2rem;
  }

  .customer-profile-card__body,
  .customer-catalog__intro-layout,
  .customer-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-access-summary {
    border-inline-end: 0;
    border-block-end: 1px solid var(--color-border-soft);
  }

  .customer-catalog__intro-layout {
    align-items: start;
  }

  .customer-footer__language {
    justify-self: start;
  }
}

@media (max-width: 39.99rem) {
  .customer-hero h1 {
    font-size: clamp(2.25rem, 1.75rem + 3.8vw, 3rem);
  }

  .customer-hero__actions,
  .customer-hero__actions .ui-button,
  .customer-catalog-jump {
    inline-size: 100%;
  }

  .customer-hero__art-space {
    min-block-size: 15rem;
  }

  .customer-profile-card__heading,
  .customer-access-summary,
  .customer-profile-details,
  .customer-profile-form {
    padding-inline: var(--space-4);
  }

  .customer-profile-card__heading {
    align-items: flex-start;
  }

  .customer-profile-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .customer-profile-grid div {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-profile-grid dd {
    text-align: start;
  }

  .customer-profile-card__actions,
  .customer-profile-card__actions .ui-button,
  .customer-profile-form__actions .ui-button {
    inline-size: 100%;
  }

  .customer-catalog {
    padding-block-start: var(--space-12);
  }

  .customer-catalog__access {
    align-items: flex-start;
  }

  .customer-catalog .catalog-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-catalog .catalog-search__actions,
  .customer-catalog .catalog-search__actions .ui-button {
    inline-size: 100%;
  }

  .customer-product-commerce {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-product-commerce__item + .customer-product-commerce__item {
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-primary-line);
  }

  .customer-catalog .catalog-product-grid .customer-product-commerce__item {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-2);
  }

  .customer-catalog .catalog-product-grid .customer-product-commerce__icon {
    display: none;
  }

  .customer-catalog .catalog-product-grid .customer-product-commerce__item strong {
    font-size: .75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 64rem) {
  .customer-hero__layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr);
    min-block-size: 42rem;
    padding-block: var(--space-10) var(--space-16);
  }

  .customer-hero__copy {
    grid-column: auto;
  }

  [dir="ltr"] .customer-hero__copy {
    grid-column: auto;
  }

  .customer-profile-card {
    grid-column: auto;
    margin-block-start: 0;
  }
}

@media (forced-colors: active) {
  .customer-hero::before,
  .customer-hero::after,
  .customer-account::before,
  .customer-profile-card::after,
  .customer-catalog::before {
    display: none;
  }
}

/* Focused Customer header/hero correction. The protected actions and page
   structure stay unchanged; these rules only recompose the existing shell. */
.customer-header .ui-header__inner {
  min-inline-size: 0;
}

.customer-header .ui-brand {
  min-inline-size: 0;
}

.customer-header .ui-brand > span:last-child {
  min-inline-size: 0;
}

.customer-hero {
  min-block-size: auto;
  border-block-end: 0;
  background: var(--color-surface);
}

.customer-hero::before {
  opacity: .34;
  mask-image: linear-gradient(to bottom, transparent 0 55%, rgb(0 0 0 / .72) 100%);
}

.customer-hero::after {
  display: none;
}

.customer-hero__layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "copy";
  gap: 0;
  min-block-size: auto;
  padding-block: 0 var(--space-8);
}

.customer-hero__art-space {
  grid-area: art;
  inline-size: calc(100% + var(--page-gutter) * 2);
  min-block-size: clamp(13.5rem, 62vw, 18rem);
  margin-inline: calc(var(--page-gutter) * -1);
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(to bottom, transparent 62%, rgb(255 255 255 / .1) 72%, var(--color-surface) 100%),
    url("/assets/design-system/customer-hero-corporate.png") 44% 48% / cover no-repeat;
}

.customer-hero__copy {
  --stack-gap: var(--space-5);
  grid-area: copy;
  max-inline-size: 42rem;
  margin-inline: auto;
  padding: var(--space-4) 0 0;
}

.customer-account {
  margin-block-start: -1rem;
}

@media (max-width: 39.99rem) {
  :root {
    --header-height: 4.75rem;
  }

  .customer-header .ui-header__inner {
    gap: var(--space-2);
  }

  .customer-header .ui-brand {
    flex: 1 1 auto;
    gap: var(--space-2);
    max-inline-size: 13.5rem;
    font-size: .94rem;
    line-height: 1.3;
  }

  .customer-header .ui-brand::before {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  .customer-header .ui-brand small {
    display: block;
    margin-block-start: .05rem;
    font-size: .66rem;
    line-height: 1.35;
  }

  .customer-header__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--space-1);
  }

  .customer-header__actions .ui-touch-link {
    min-inline-size: 2.75rem;
    justify-content: center;
    padding-inline: var(--space-2);
    font-size: .9rem;
  }

  .customer-header__actions .ui-menu-toggle {
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding-inline: 0;
    font-size: 1.2rem;
  }

  .customer-hero__layout {
    padding-block-end: var(--space-6);
  }

  .customer-hero__art-space {
    background-position: 42% 48%;
  }

  .customer-hero__copy {
    inline-size: 100%;
    padding-block-start: var(--space-2);
  }

  .customer-hero__status {
    transform: translateY(-1rem);
  }

  .customer-hero h1 {
    font-size: clamp(2.25rem, 1.65rem + 4.8vw, 3rem);
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .customer-hero__layout {
    padding-block-end: var(--space-10);
  }

  .customer-hero__art-space {
    min-block-size: clamp(20rem, 48vw, 27rem);
    aspect-ratio: 16 / 8.5;
  }

  .customer-hero__copy {
    inline-size: min(100%, 42rem);
    margin-block-start: -1.5rem;
    padding: var(--space-6);
    border: 1px solid rgb(255 255 255 / .86);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / .9);
    box-shadow: var(--shadow-elevation-1);
    backdrop-filter: blur(18px);
  }
}

@media (min-width: 64rem) {
  .customer-header .ui-container--wide,
  .customer-hero .ui-container--wide {
    --container-size: 112rem;
  }

  .customer-header .ui-header__inner {
    min-block-size: 5.5rem;
  }

  .customer-header .ui-brand::before {
    inline-size: 3.25rem;
    block-size: 3.25rem;
  }

  .customer-header .ui-brand {
    font-size: 1.05rem;
  }

  .customer-header .ui-brand small {
    font-size: .8rem;
  }

  .customer-header .ui-desktop-nav {
    gap: var(--space-4);
  }

  .customer-header .ui-nav-link {
    font-size: 1.05rem;
  }

  .customer-header__actions .ui-link,
  .customer-header__actions .ui-button {
    font-size: .98rem;
  }

  .customer-hero,
  [dir="ltr"] .customer-hero {
    min-block-size: clamp(44rem, calc(100dvb - var(--header-height) - 4rem), 50rem);
    background:
      linear-gradient(90deg, transparent 0 45%, rgb(255 255 255 / .18) 54%, rgb(255 255 255 / .88) 72%, rgb(255 255 255 / .985) 100%),
      linear-gradient(to top, rgb(255 255 255 / .96), transparent 30%),
      url("/assets/design-system/customer-hero-corporate.png") center 46% / cover no-repeat;
  }

  .customer-hero::before {
    opacity: .48;
    mask-image: linear-gradient(90deg, rgb(0 0 0 / .66), transparent 72%);
  }

  .customer-hero__layout {
    direction: ltr;
    grid-template-columns: minmax(0, 1.15fr) minmax(32rem, .85fr);
    grid-template-areas: "art copy";
    align-items: center;
    gap: clamp(2rem, 4vw, 6rem);
    min-block-size: clamp(44rem, calc(100dvb - var(--header-height) - 4rem), 50rem);
    padding-block: var(--space-10) var(--space-16);
  }

  .customer-hero__art-space {
    grid-area: art;
    inline-size: auto;
    min-block-size: 1px;
    margin: 0;
    aspect-ratio: auto;
    background: none;
  }

  .customer-hero__copy {
    --stack-gap: var(--space-6);
    grid-area: copy;
    inline-size: 100%;
    max-inline-size: 41rem;
    margin: 0;
    padding: var(--space-8) 0;
  }

  .customer-account {
    margin-block-start: -5rem;
  }
}

@media (forced-colors: active) {
  .customer-hero__art-space {
    background-image: none;
  }
}

/* Approved compact floating membership-card composition. */
.customer-account {
  margin-block-start: -20rem;
  padding-block-end: var(--space-8);
  pointer-events: none;
}

.customer-account::before {
  inset-block-start: 20rem;
}

.customer-profile-card {
  isolation: isolate;
  inline-size: clamp(38rem, 44vw, 56rem);
  max-inline-size: calc(100vw - var(--page-gutter) * 2);
  aspect-ratio: 1.78 / 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .78);
  border-radius: 1.45rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .94), rgb(255 248 246 / .87) 54%, rgb(249 249 248 / .92)),
    var(--color-surface-soft);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .96),
    inset 0 -1px 0 rgb(220 21 27 / .055),
    0 18px 46px rgb(20 22 25 / .16),
    0 4px 14px rgb(220 21 27 / .06);
  backdrop-filter: blur(17px);
  pointer-events: auto;
}

.customer-catalog {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-3));
}

.customer-profile-card:has(.customer-profile-form:not([hidden])),
.customer-profile-card:has(> .ui-alert:not([hidden])) {
  aspect-ratio: auto;
}

.customer-profile-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: 29%;
  left: 4.5%;
  inline-size: 35%;
  block-size: 60%;
  background: url("/assets/design-system/mirabedini-mark.jpg") center / contain no-repeat;
  opacity: .135;
  filter: blur(2.5px) saturate(.45) contrast(.88);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.customer-profile-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  inline-size: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 79% 56%, rgb(255 255 255 / .7), transparent 29%),
    linear-gradient(118deg, transparent 0 44%, rgb(255 255 255 / .36) 54%, transparent 65%);
  box-shadow: inset 0 0 2.2rem rgb(255 255 255 / .48);
  pointer-events: none;
}

.customer-profile-card > * {
  position: relative;
  z-index: 1;
}

.customer-profile-card__heading {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-2);
  border: 0;
  background: transparent;
}

.customer-profile-card__heading > div {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.customer-profile-card__brand {
  direction: ltr;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.customer-profile-card__brand img {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  flex: 0 0 auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.customer-profile-card__brand span {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
}

[dir="rtl"] .customer-profile-card__brand span {
  direction: rtl;
  text-align: right;
}

.customer-profile-card__brand strong {
  color: var(--color-text-primary);
  font-size: .95rem;
  line-height: 1.45;
  white-space: nowrap;
}

.customer-profile-card__brand small {
  color: var(--color-text-secondary);
  font-size: .65rem;
  line-height: 1.45;
  white-space: nowrap;
}

.customer-access-summary {
  --stack-gap: 0;
  direction: rtl;
  inline-size: fit-content;
  max-inline-size: 52%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: .35rem var(--space-3) .35rem .4rem;
  overflow: visible;
  border: 1px solid rgb(220 21 27 / .13);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .68);
  box-shadow: 0 7px 20px rgb(220 21 27 / .08);
  backdrop-filter: blur(8px);
}

[dir="ltr"] .customer-access-summary {
  direction: ltr;
  padding: .35rem .4rem .35rem var(--space-3);
}

.customer-access-summary::after {
  content: none;
  display: none;
}

.customer-access-summary__mark {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: var(--text-small);
  box-shadow: 0 7px 18px rgb(220 21 27 / .18);
}

.customer-access-summary .ui-caption,
.customer-access-summary p {
  display: none;
}

.customer-access-summary .ui-h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: .8rem;
  line-height: 1.35;
  white-space: nowrap;
}

.customer-profile-card__title-row {
  inline-size: 64%;
  min-inline-size: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-left: auto;
  padding: 0 var(--space-5) var(--space-1);
}

.customer-profile-card__title-row > div {
  min-inline-size: 0;
}

.customer-profile-card__title-row .ui-caption {
  display: none;
}

.customer-profile-card__title-row .ui-h3 {
  font-size: 1.12rem;
  line-height: 1.35;
}

.customer-profile-card__role {
  min-block-size: auto;
  max-inline-size: 52%;
  padding: 0;
  overflow-wrap: anywhere;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  font-size: .65rem;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-align: end;
}

.customer-profile-card__body {
  display: block;
  min-inline-size: 0;
  min-block-size: 0;
}

.customer-profile-details {
  inline-size: 64%;
  block-size: 100%;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  padding: 0 var(--space-5) var(--space-4);
}

.customer-profile-grid {
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}

.customer-profile-grid div {
  display: grid;
  grid-template-columns: minmax(5.75rem, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-2);
  padding: .42rem var(--space-1);
  border-block-end: 1px solid rgb(98 102 107 / .14);
}

.customer-profile-grid dt {
  font-size: .7rem;
  line-height: 1.3;
}

.customer-profile-grid dd {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-size: .82rem;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  text-align: start;
}

.customer-profile-card__actions {
  inline-size: 100%;
  justify-content: stretch;
  padding: var(--space-2) 0 0;
}

.customer-profile-card__actions .ui-button {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 2.3rem;
  padding-block: .4rem;
  border-color: rgb(98 102 107 / .46);
  background: rgb(255 255 255 / .74);
  box-shadow: 0 5px 16px rgb(20 22 25 / .055);
  font-size: .8rem;
  backdrop-filter: blur(8px);
}

.customer-profile-card__actions .ui-button:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.customer-profile-card > .ui-alert {
  margin: var(--space-3) var(--space-5) 0;
}

.customer-profile-form {
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: rgb(255 255 255 / .66);
  backdrop-filter: blur(12px);
}

@media (max-width: 63.99rem) {
  .customer-account {
    margin-block-start: -10rem;
  }

  .customer-account::before {
    inset-block-start: 10rem;
  }

  .customer-profile-card {
    inline-size: min(86vw, 42rem);
    aspect-ratio: 1.7 / 1;
  }
}

@media (max-width: 39.99rem) {
  .customer-account {
    margin-block-start: -4rem;
    padding-block-end: var(--space-8);
  }

  .customer-account::before {
    inset-block-start: 4rem;
  }

  .customer-profile-card {
    inline-size: 88vw;
    max-inline-size: 22rem;
    aspect-ratio: auto;
    border-radius: 1.2rem;
  }

  .customer-profile-card::before {
    inset-block-start: 32%;
    left: 3.5%;
    inline-size: 38%;
    block-size: 56%;
    opacity: .13;
    filter: blur(2px) saturate(.45) contrast(.88);
  }

  .customer-profile-card::after {
    background:
      radial-gradient(circle at 79% 58%, rgb(255 255 255 / .64), transparent 32%),
      linear-gradient(118deg, transparent 0 43%, rgb(255 255 255 / .3) 53%, transparent 66%);
  }

  .customer-profile-card__heading {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
  }

  .customer-profile-card__brand img {
    inline-size: 2.65rem;
    block-size: 2.65rem;
  }

  .customer-profile-card__brand {
    gap: var(--space-1);
  }

  .customer-profile-card__brand strong {
    font-size: .78rem;
  }

  .customer-profile-card__brand small {
    display: none;
  }

  .customer-access-summary {
    max-inline-size: 53%;
    gap: var(--space-1);
    padding: .25rem var(--space-2) .25rem .3rem;
  }

  [dir="ltr"] .customer-access-summary {
    padding: .25rem .3rem .25rem var(--space-2);
  }

  .customer-access-summary__mark {
    inline-size: 1.65rem;
    block-size: 1.65rem;
    font-size: .68rem;
  }

  .customer-access-summary .ui-h3 {
    font-size: .68rem;
  }

  .customer-profile-card__title-row,
  .customer-profile-details {
    inline-size: 72%;
    padding-inline: var(--space-3);
  }

  .customer-profile-card__title-row {
    padding-block-end: var(--space-1);
  }

  .customer-profile-card__title-row .ui-h3 {
    font-size: 1rem;
  }

  .customer-profile-card__role {
    font-size: .6rem;
  }

  .customer-profile-details {
    padding-block-end: var(--space-3);
  }

  .customer-profile-grid div {
    grid-template-columns: minmax(4.5rem, .78fr) minmax(0, 1.22fr);
    gap: var(--space-1);
    padding: .36rem .15rem;
  }

  .customer-profile-grid dt {
    font-size: .64rem;
  }

  .customer-profile-grid dd {
    font-size: .74rem;
  }

  .customer-profile-card__actions .ui-button {
    min-block-size: 2.25rem;
    font-size: .75rem;
  }

  .customer-profile-card > .ui-alert {
    margin: var(--space-3) var(--space-4) 0;
  }

  .customer-profile-form {
    padding: var(--space-4);
  }
}

@media (forced-colors: active) {
  .customer-profile-card::before,
  .customer-profile-card::after {
    display: none;
  }
}

/* Approved final mobile landing-page composition. */
@media (max-width: 39.99rem) {
  :root {
    --header-height: 5.25rem;
  }

  .customer-header .ui-header__inner {
    direction: ltr;
    display: grid;
    grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
    min-block-size: var(--header-height);
    padding-block: .45rem;
  }

  .customer-header .ui-brand {
    direction: rtl;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    inline-size: auto;
    max-inline-size: 10rem;
    gap: .4rem;
    font-size: .8rem;
    line-height: 1.25;
  }

  .customer-header .ui-brand::before {
    inline-size: 2.55rem;
    block-size: 2.55rem;
  }

  .customer-header .ui-brand small {
    display: block;
    margin-block-start: .08rem;
    font-size: .58rem;
    line-height: 1.3;
  }

  .customer-header__actions {
    display: contents;
  }

  .customer-header__actions .ui-menu-toggle {
    grid-column: 1;
    grid-row: 1;
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: 0;
    font-size: 1.25rem;
  }

  .customer-header__actions .ui-touch-link {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 2.75rem;
    justify-content: center;
    padding-inline: .35rem;
    font-size: .88rem;
  }

  .customer-header .customer-sign-out {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    min-inline-size: 3.25rem;
    min-block-size: 2.55rem;
    justify-self: end;
    padding-inline: .65rem;
    font-size: .72rem;
  }

  .customer-hero,
  [dir="ltr"] .customer-hero {
    min-block-size: auto;
    overflow: visible;
    background:
      linear-gradient(to bottom, transparent 0 24%, rgb(255 255 255 / .08) 43%, rgb(255 255 255 / .78) 59%, var(--color-surface) 72%),
      var(--color-surface);
  }

  .customer-hero::before,
  .customer-hero::after {
    display: none;
  }

  .customer-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "copy";
    gap: 0;
    padding-block: 0 var(--space-4);
  }

  .customer-hero__art-space {
    grid-area: art;
    inline-size: calc(100% + var(--page-gutter) * 2);
    min-block-size: 15rem;
    margin-inline: calc(var(--page-gutter) * -1);
    aspect-ratio: auto;
    background:
      linear-gradient(to bottom, transparent 0 52%, rgb(255 255 255 / .12) 68%, var(--color-surface) 100%),
      url("/assets/design-system/customer-hero-corporate.png") 43% center / cover no-repeat;
  }

  .customer-hero__copy {
    --stack-gap: var(--space-4);
    z-index: 1;
    grid-area: copy;
    inline-size: 100%;
    max-inline-size: none;
    margin: -7.25rem 0 0;
    padding: 0 .25rem var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .customer-hero__status {
    display: none;
  }

  .customer-hero__status-mark {
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }

  .customer-hero__status small {
    font-size: .67rem;
  }

  .customer-hero__status strong {
    font-size: .78rem;
  }

  .customer-eyebrow {
    font-size: .78rem;
  }

  .customer-hero h1 {
    max-inline-size: 100%;
    font-size: clamp(2.25rem, 1.55rem + 4.6vw, 2.75rem);
    line-height: 1.28;
    letter-spacing: -.035em;
  }

  .customer-hero__intro {
    max-inline-size: 36ch;
    font-size: .94rem;
    line-height: 1.9;
  }

  .customer-hero__actions {
    inline-size: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .customer-hero__actions .customer-catalog-jump {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 4rem;
    justify-content: space-between;
    padding-inline: var(--space-5);
    border-radius: 1rem;
    background: linear-gradient(135deg, #ee1119, var(--color-primary));
    box-shadow: 0 14px 30px rgb(220 21 27 / .2);
    font-size: .92rem;
  }

  .customer-catalog-jump__label {
    align-items: flex-start;
    gap: .16rem;
  }

  [dir="rtl"] .customer-catalog-jump__label {
    align-items: flex-end;
    text-align: right;
  }

  .customer-catalog-jump__label small {
    font-size: .7rem;
  }

  .customer-hero__actions .ui-arrow {
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgb(255 255 255 / .15);
    font-size: 1.1rem;
  }

  .customer-hero__secure-note {
    display: none;
  }

  .customer-account {
    margin-block-start: 0;
    padding-block: var(--space-2) var(--space-8);
  }

  .customer-account::before {
    inset-block-start: 0;
  }

  .customer-profile-card {
    inline-size: 90vw;
    max-inline-size: 22.5rem;
    border-radius: 1.3rem;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .96),
      inset 0 -1px 0 rgb(220 21 27 / .055),
      0 20px 42px rgb(20 22 25 / .15),
      0 5px 16px rgb(220 21 27 / .06);
  }

  .customer-profile-card__heading {
    padding: var(--space-3) var(--space-4) var(--space-2);
  }

  .customer-profile-card__brand strong {
    font-size: .82rem;
  }

  .customer-profile-card__title-row,
  .customer-profile-details {
    inline-size: 74%;
    padding-inline: var(--space-4);
  }

  .customer-profile-card__title-row .ui-h3 {
    font-size: 1.08rem;
  }

  .customer-profile-grid dt {
    font-size: .68rem;
  }

  .customer-profile-grid dd {
    font-size: .78rem;
  }

  .customer-profile-card__actions .ui-button {
    min-block-size: 2.65rem;
    border-radius: .75rem;
    font-size: .8rem;
  }

  .customer-catalog {
    padding-block-start: var(--space-10);
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .customer-account {
    margin-block-start: -2rem;
  }

  .customer-account::before {
    inset-block-start: 2rem;
  }
}

/* Keep the floating card in the hero's artwork column so account copy stays readable. */
@media (min-width: 64rem) {
  .customer-profile-card {
    margin-left: 0;
    margin-right: auto;
  }
}