/* The first screen stays familiar; the kits offer leads with the main product. */
.portal-journey-page .portal-columns {
  grid-template-columns: repeat(var(--portal-door-count, 1), minmax(0, 1fr));
}

.portal-journey-page button.portal-column {
  width: 100%;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

.portal-journey-back[hidden] { display: none !important; }
.portal-journey-stage { animation: portal-journey-enter 320ms cubic-bezier(.2,.7,.2,1) both; }
.portal-journey-stage:focus { outline: none; }
.portal-journey-leaving .portal-journey-stage { animation: portal-journey-exit 220ms ease both; }

.portal-offer {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(4.5rem, 7vh, 6rem) clamp(1.5rem, 5vw, 5rem);
  background: #fff;
  color: #000;
}

.portal-offer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  grid-template-areas: "message art" "alternatives art";
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.25rem;
  width: min(100%, 1200px);
}

.portal-offer-message { grid-area: message; min-width: 0; }

.portal-offer h1 {
  margin: 0;
  font-size: clamp(6rem, 10vw, 10rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.045em;
}

.portal-offer-kits-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  color: #000;
  text-decoration: none;
  animation: portal-reveal 420ms cubic-bezier(.2,.7,.2,1) both;
}

.portal-offer .portal-offer-kits-title {
  display: flex;
  align-items: flex-end;
  gap: clamp(.45rem, 1.4vw, 1.2rem);
  font-size: clamp(6rem, 10vw, 10rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-offer-kits-entry:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.portal-offer-kits-entry:hover .portal-offer-kits-title { opacity: .76; }
.portal-offer-kits-title { transition: opacity .18s ease; }

.portal-offer-alternatives {
  grid-area: alternatives;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: .4rem;
  margin: 0;
  font-size: 1rem;
  animation: portal-reveal 420ms 180ms cubic-bezier(.2,.7,.2,1) both;
}

.portal-offer-alternatives .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #555;
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
}

.portal-offer-alternatives .text-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.portal-offer-alternatives .text-link:focus-visible,
.portal-offer-preview:focus-visible,
.portal-offer-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.portal-offer-art {
  grid-area: art;
  position: relative;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: min(100%, 340px);
  animation: portal-art-arrive 520ms 90ms cubic-bezier(.2,.7,.2,1) both;
}

.portal-offer-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  transition: transform .22s ease;
}

.portal-offer-cover:hover { transform: translateY(-3px); }
.portal-offer-cover img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 16px; box-shadow: 0 24px 54px rgba(28, 37, 0, .2); transform: rotate(2.5deg); }

.portal-offer .portal-offer-preview {
  position: static;
  align-self: center;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-size: .82rem;
}

.portal-journey-noscript { position: fixed; right: 1rem; bottom: 1rem; display: flex; gap: 1rem; background: #fff; }
.portal-journey-noscript a { color: #000; }

@keyframes portal-journey-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes portal-journey-exit {
  to { opacity: 0; transform: translateY(-8px) scale(.99); }
}

@keyframes portal-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes portal-art-arrive {
  from { opacity: 0; transform: translateY(28px) rotate(-4deg) scale(.93); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 900px) {
  .portal-offer { place-items: start center; padding: 5rem 1.5rem 2.5rem; }
  .portal-offer-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "message" "art" "alternatives";
    justify-items: center;
    row-gap: 1rem;
    width: min(100%, 470px);
  }
  .portal-offer-message { text-align: center; }
  .portal-offer-kits-entry { align-items: center; }
  .portal-offer h1,
  .portal-offer .portal-offer-kits-title { font-size: clamp(3.4rem, 12vw, 6.2rem); }
  .portal-offer-art { width: min(68vw, 290px); }
  .portal-offer-alternatives { justify-content: center; column-gap: 2rem; }
}

@media (max-width: 420px) {
  .portal-offer { padding: 4.75rem 1.1rem 2rem; }
  .portal-offer h1,
  .portal-offer .portal-offer-kits-title { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .portal-offer-inner { row-gap: .8rem; }
  .portal-offer-art { width: min(70vw, 250px); }
  .portal-offer .portal-offer-preview { font-size: .76rem; }
  .portal-offer-alternatives { column-gap: 1.4rem; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-journey-stage,
  .portal-journey-leaving .portal-journey-stage,
  .portal-offer-art,
  .portal-offer-kits-entry,
  .portal-offer-alternatives { animation: none; }
}