.upgrades-page {
  overflow: hidden;
}

.upgrades-page section[id] {
  scroll-margin-top: 7rem;
}

.upgrades-page__hero {
  padding-top: clamp(3rem, 5vw, 5.5rem);
}

.upgrades-page__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(23.75rem, 44fr);
  gap: 2.5rem;
  align-items: center;
}

.upgrades-page__hero-copy,
.upgrades-page__hero-lead,
.upgrades-page__hero-visual,
.upgrades-page__section-intro,
.upgrades-page__areas-side,
.upgrades-page__flow-copy,
.upgrades-page__flow-aside,
.upgrades-page__decor-copy,
.upgrades-page__cta-copy {
  min-width: 0;
}

.upgrades-page__hero-copy {
  display: flex;
  width: 100%;
  max-width: 37.5rem;
  flex-direction: column;
  gap: var(--space-4);
}

.upgrades-page__hero-copy .eyebrow,
.upgrades-page__hero-copy h1,
.upgrades-page__hero-copy p,
.upgrades-page__hero-copy ul,
.upgrades-page__hero-copy .button-group {
  margin: 0;
}

.upgrades-page__hero-lead {
  display: flex;
  max-width: 35rem;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}

.upgrades-page__hero-actions {
  align-items: stretch;
}

.upgrades-page__hero-actions > * {
  min-width: 0;
}

.upgrades-page__hero-tip {
  width: 100%;
  max-width: 31rem;
}

.upgrades-page__hero-tip ul {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: 1.25rem;
}

.upgrades-page__hero-visual {
  position: relative;
  width: 100%;
  border: var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-apricot);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
}

.upgrades-page__hero-visual::before {
  position: absolute;
  z-index: 0;
  top: 7%;
  right: 8%;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-strawberry);
  content: "";
}

.upgrades-page__hero-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.upgrades-page__section-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.upgrades-page__section-intro > * {
  margin: 0;
}

.upgrades-page__areas-intro {
  width: 100%;
  max-width: 43.75rem;
  margin-bottom: var(--space-6);
}

.upgrades-page__areas-grid {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--space-5);
  align-items: stretch;
}

.upgrades-page__areas-grid > *,
.upgrades-page__areas-side > *,
.upgrades-page__equipment-grid > *,
.upgrades-page__diagnosis-steps > *,
.upgrades-page__flow-grid > *,
.upgrades-page__priority-grid > *,
.upgrades-page__decor-grid > *,
.upgrades-page__levels-grid > *,
.upgrades-page__learning-links > *,
.upgrades-page__plan-steps > * {
  min-width: 0;
}

.upgrades-page__areas-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.upgrades-page__area-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.upgrades-page__area-card > * {
  margin: 0;
}

.upgrades-page__area-card--equipment {
  justify-content: center;
}

.upgrades-page__area-card--restaurant,
.upgrades-page__area-card--decor {
  padding: var(--space-5);
}

.upgrades-page__number {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-mandarin);
  padding: 0.375rem 0.55rem;
  color: var(--color-chocolate);
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  font-weight: 800;
  line-height: 1;
}

.upgrades-page__area-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 2px solid var(--color-chocolate);
  border-radius: 50%;
  background: var(--color-apricot);
  font-size: 1.5rem;
}

.upgrades-page__text-link {
  display: inline-flex;
  min-height: 2.75rem;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-strawberry);
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  font-weight: 800;
  line-height: 1.35;
  text-decoration-thickness: 0.12em;
}

.upgrades-page__text-link:hover {
  color: var(--color-mandarin-active);
}

.upgrades-page__mini-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: var(--font-size-small);
}

.upgrades-page__equipment-intro {
  width: 100%;
  max-width: 40rem;
  margin-bottom: var(--space-6);
}

.upgrades-page__equipment-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.upgrades-page__device-card--coffee {
  grid-column: span 3;
}

.upgrades-page__device-card--pizza {
  grid-column: span 5;
}

.upgrades-page__device-card--rice {
  grid-column: 1 / span 4;
}

.upgrades-page__device-card--popcorn {
  grid-column: 5 / span 4;
}

.upgrades-page__device-body {
  gap: var(--space-3);
}

.upgrades-page__device-body > * {
  margin: 0;
}

.upgrades-page__device-body .upgrades-page__text-link {
  margin-top: auto;
}

.upgrades-page__tip-number {
  color: var(--color-cocoa);
  font-family: var(--font-heading);
  font-size: var(--font-size-label);
  font-weight: 800;
}

.upgrades-page__observe {
  border-radius: var(--radius-sm);
  background: var(--color-mint);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.upgrades-page__diagnosis {
  background: linear-gradient(180deg, transparent 0, transparent 28%, rgb(232 243 216 / 55%) 28%, rgb(232 243 216 / 55%) 100%);
}

.upgrades-page__diagnosis-intro {
  width: 100%;
  max-width: 45rem;
  margin-bottom: var(--space-6);
}

.upgrades-page__diagnosis-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: diagnosis;
}

.upgrades-page__diagnosis-steps > li {
  position: relative;
  min-width: 0;
  counter-increment: diagnosis;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.upgrades-page__diagnosis-steps > li::before {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-mandarin);
  color: var(--color-chocolate);
  content: counter(diagnosis);
  font-family: var(--font-heading);
  font-weight: 800;
}

.upgrades-page__diagnosis-steps h3 {
  margin-top: var(--space-4);
}

.upgrades-page__diagnosis-steps ul {
  margin-bottom: 0;
}

.upgrades-page__strategy-tip {
  display: grid;
  width: 100%;
  max-width: 51.25rem;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
}

.upgrades-page__strategy-tip p {
  margin: 0;
}

.upgrades-page__bulb {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 2px solid var(--color-chocolate);
  border-radius: 50%;
  background: var(--color-apricot);
  font-size: 1.25rem;
}

.upgrades-page__flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(18.75rem, 32fr);
  gap: 3rem;
  align-items: start;
}

.upgrades-page__flow-copy {
  width: 100%;
  max-width: 43.75rem;
}

.upgrades-page__flow-copy .eyebrow {
  margin-bottom: var(--space-3);
}

.upgrades-page__flow-copy h3 {
  margin-top: var(--space-5);
}

.upgrades-page__flow-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.upgrades-page__flow-diagram {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  list-style: none;
  border: var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
}

.upgrades-page__flow-diagram li {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-sm);
  background: var(--color-apricot);
  padding: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 800;
  text-align: center;
}

.upgrades-page__flow-diagram li:not(:last-child)::after {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-strawberry);
  content: "↓";
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1;
}

.upgrades-page__signal-card,
.upgrades-page__extras-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.upgrades-page__signal-card > *,
.upgrades-page__extras-card > * {
  margin: 0;
}

.upgrades-page__signal-card h3,
.upgrades-page__extras-card h3 {
  font-size: 1.25rem;
}

.upgrades-page__priorities {
  background: var(--color-cream);
}

.upgrades-page__priorities-intro {
  width: 100%;
  max-width: 40.625rem;
  margin-bottom: var(--space-6);
}

.upgrades-page__priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.upgrades-page__priority-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  border: 2px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  background: var(--color-vanilla);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.upgrades-page__priority-card > * {
  margin: 0;
}

.upgrades-page__priority-card:hover {
  border-color: var(--color-strawberry);
  transform: translateY(-2px);
}

.upgrades-page__decor-grid {
  display: grid;
  grid-template-columns: minmax(22.5rem, 44fr) minmax(0, 50fr);
  gap: 3rem;
  align-items: center;
}

.upgrades-page__decor-visual {
  width: 100%;
  margin: 0;
  border: var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-mint);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
}

.upgrades-page__decor-visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.upgrades-page__decor-copy {
  width: 100%;
  max-width: 38.75rem;
}

.upgrades-page__decor-copy .eyebrow {
  margin-bottom: var(--space-3);
}

.upgrades-page__decor-copy h3 {
  margin-top: var(--space-5);
}

.upgrades-page__decor-list {
  display: grid;
  gap: var(--space-3);
}

.upgrades-page__decor-tip {
  margin-top: var(--space-5);
}

.upgrades-page__decor-tip ul {
  display: grid;
  gap: var(--space-2);
  margin-bottom: 0;
}

.upgrades-page__levels-intro {
  width: 100%;
  max-width: 43.75rem;
  margin-bottom: var(--space-6);
}

.upgrades-page__levels-grid {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--space-5);
  align-items: stretch;
}

.upgrades-page__level-card,
.upgrades-page__challenge-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.upgrades-page__level-card > *,
.upgrades-page__challenge-card > * {
  margin: 0;
}

.upgrades-page__level-card .button {
  width: fit-content;
  margin-top: auto;
}

.upgrades-page__learning-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.upgrades-page__learning-links article {
  min-width: 0;
  border-top: 3px solid var(--color-strawberry);
  padding-top: var(--space-3);
}

.upgrades-page__learning-links h3 {
  margin-bottom: var(--space-2);
  font-size: 1.25rem;
}

.upgrades-page__learning-links p {
  margin-bottom: 0;
}

.upgrades-page__plan-intro {
  width: 100%;
  max-width: 43.75rem;
  margin-bottom: var(--space-6);
}

.upgrades-page__plan-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.upgrades-page__plan-steps::before {
  position: absolute;
  z-index: 0;
  top: 1.5rem;
  right: 12%;
  left: 12%;
  height: 2px;
  background: var(--color-chocolate);
  content: "";
}

.upgrades-page__plan-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.upgrades-page__plan-number {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 2px solid var(--color-chocolate);
  border-radius: 50%;
  background: var(--color-mandarin);
  color: var(--color-chocolate);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
}

.upgrades-page__plan-steps h3 {
  margin-bottom: var(--space-2);
}

.upgrades-page__plan-steps p {
  margin-bottom: 0;
}

.upgrades-page__independence-panel {
  display: flex;
  width: 100%;
  max-width: 45rem;
  flex-direction: column;
  gap: var(--space-3);
}

.upgrades-page__independence-panel > * {
  margin: 0;
}

.upgrades-page__cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.upgrades-page__cta-panel::after {
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  width: 8rem;
  height: 8rem;
  border: 2px solid var(--color-strawberry);
  border-radius: 50%;
  content: "";
  opacity: 0.45;
}

.upgrades-page__cta-copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 45rem;
  flex-direction: column;
  gap: var(--space-3);
}

.upgrades-page__cta-copy > * {
  margin: 0;
}

.upgrades-page__cta-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.upgrades-page__cta-actions > * {
  min-width: 0;
}

.upgrades-page__cta-link {
  margin-left: var(--space-2);
}

@media (max-width: 60rem) {
  .upgrades-page__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .upgrades-page__hero-copy,
  .upgrades-page__hero-tip {
    max-width: none;
  }

  .upgrades-page__hero-visual {
    max-width: 48rem;
  }

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

  .upgrades-page__device-card--coffee,
  .upgrades-page__device-card--pizza,
  .upgrades-page__device-card--rice,
  .upgrades-page__device-card--popcorn {
    grid-column: auto;
  }
}

@media (max-width: 56.25rem) {
  .upgrades-page__flow-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .upgrades-page__flow-copy {
    max-width: 43.75rem;
  }

  .upgrades-page__flow-aside {
    width: 100%;
    max-width: 43.75rem;
  }
}

@media (max-width: 53.75rem) {
  .upgrades-page__areas-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__decor-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .upgrades-page__decor-copy {
    max-width: 38.75rem;
    order: 1;
  }

  .upgrades-page__decor-visual {
    max-width: 48rem;
    order: 2;
  }
}

@media (max-width: 50rem) {
  .upgrades-page__levels-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__diagnosis-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__diagnosis-steps > li {
    padding: var(--space-5);
  }
}

@media (max-width: 47.5rem) {
  .upgrades-page__hero {
    padding-top: 3rem;
  }

  .upgrades-page__hero-copy {
    gap: var(--space-4);
  }

  .upgrades-page__hero-copy h1 {
    font-size: 2.125rem;
    line-height: 1.118;
  }

  .upgrades-page__hero-lead {
    max-width: none;
  }

  .upgrades-page__hero-visual {
    margin-top: var(--space-2);
  }

  .upgrades-page__plan-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__plan-steps::before {
    top: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 2px;
    height: auto;
  }

  .upgrades-page__plan-steps li {
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 42.5rem) {
  .upgrades-page__priority-grid,
  .upgrades-page__learning-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .upgrades-page__cta-actions .button,
  .upgrades-page__cta-actions .upgrades-page__text-link {
    width: 100%;
  }

  .upgrades-page__cta-link {
    margin-left: 0;
  }
}

@media (max-width: 37.5rem) {
  .upgrades-page__equipment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__mini-checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__strategy-tip {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__hero-actions .button {
    width: 100%;
  }
}

@media (max-width: 24.375rem) {
  .upgrades-page__diagnosis-steps > li {
    padding: var(--space-4);
  }

  .upgrades-page__plan-steps li {
    grid-template-columns: minmax(0, 1fr);
  }

  .upgrades-page__plan-steps::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upgrades-page__priority-card:hover {
    transform: none;
  }
}