/* Public access-journey concept — static, non-functional and non-authoritative. */
.access-journey-page {
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  color: #f7f5f5;
  color: var(--ui-color-text);
  background: #171414;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-color-primary-soft) 44%, transparent), transparent 31rem),
    var(--ui-color-background);
}

.access-journey-page *,
.access-journey-page *::before,
.access-journey-page *::after {
  box-sizing: border-box;
}

.access-journey-container {
  width: min(1160px, calc(100% - 2 * clamp(var(--space-md), 4vw, var(--space-xl))));
  margin-inline: auto;
}

.access-journey-header {
  border-bottom: 1px solid var(--ui-color-border);
  background: color-mix(in srgb, var(--ui-color-surface) 94%, transparent);
}

.access-journey-header-inner,
.access-journey-nav,
.access-journey-actions,
.access-journey-section-heading,
.access-journey-footer > div {
  display: flex;
  align-items: center;
}

.access-journey-header-inner {
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 88px;
}

.access-journey-wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  text-decoration: none;
}

.access-journey-nav {
  justify-content: flex-end;
  gap: var(--space-xs);
}

.access-journey-nav > a,
.access-journey-actions > a,
.access-journey-guardrail > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-button);
  font-size: var(--ui-font-sm);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.access-journey-nav > a {
  padding-inline: var(--space-sm);
  color: var(--ui-color-text);
}

.access-journey-intro {
  padding-block: clamp(var(--space-xl), 7vw, 6rem) clamp(var(--space-xl), 6vw, 5rem);
}

.access-journey-kicker {
  margin: 0;
  color: var(--bejiggi-accent);
  font-size: var(--ui-font-xs);
  font-weight: 850;
  letter-spacing: var(--ui-letter-label);
  text-transform: uppercase;
}

.access-journey-intro h1 {
  max-width: 12ch;
  margin: var(--space-md) 0 0;
  font-size: clamp(3.25rem, 9vw, 7rem);
  line-height: .91;
  letter-spacing: -.065em;
}

.access-journey-lead {
  max-width: 63ch;
  margin: var(--space-lg) 0 0;
  color: var(--ui-color-muted);
  font-size: var(--type-body-l);
  line-height: 1.65;
}

.access-journey-actions {
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.access-journey-actions > a,
.access-journey-guardrail > a {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--bejiggi-action);
}

.access-journey-action-primary {
  color: var(--bejiggi-on-accent);
  background: var(--bejiggi-action);
}

.access-journey-action-secondary,
.access-journey-guardrail > a {
  color: var(--bejiggi-accent);
  background: var(--ui-color-surface);
}

.access-journey-disclosure,
.access-journey-guardrail {
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  border: 1px solid var(--ui-color-border);
  border-left: 4px solid var(--bejiggi-accent);
  border-radius: 0 var(--radius-dialog) var(--radius-dialog) 0;
  background: color-mix(in srgb, var(--bejiggi-accent-surface) 58%, var(--ui-color-surface));
}

.access-journey-disclosure h2,
.access-journey-section-heading h2,
.access-journey-guardrail h2 {
  margin: var(--space-xs) 0 0;
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: var(--ui-letter-tight);
}

.access-journey-disclosure > p:last-child,
.access-journey-guardrail > p:not(.access-journey-kicker) {
  max-width: 74ch;
  margin: var(--space-md) 0 0;
  color: var(--ui-color-muted);
  font-size: var(--ui-font-sm);
  line-height: 1.65;
}

.access-journey-flow {
  padding-block: clamp(var(--space-xl), 7vw, 6rem);
}

.access-journey-section-heading {
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.access-journey-section-heading > p {
  max-width: 42ch;
  margin: 0;
  color: var(--ui-color-muted);
  font-size: var(--ui-font-sm);
  line-height: 1.55;
  text-align: right;
}

.access-journey-stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.access-journey-stages > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-md);
  min-width: 0;
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  border: 1px solid var(--ui-color-border);
  border-radius: var(--radius-card);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
}

.access-journey-number {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--ui-color-border-strong);
  border-radius: 50%;
  color: var(--bejiggi-accent);
  background: var(--bejiggi-accent-surface);
  font-size: var(--ui-font-xs);
  font-weight: 850;
  letter-spacing: .06em;
}

.access-journey-stages h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: var(--ui-letter-tight);
}

.access-journey-stages p {
  margin: var(--space-sm) 0 0;
  color: var(--ui-color-muted);
  font-size: var(--ui-font-sm);
  line-height: 1.6;
}

.access-journey-guardrail {
  margin-bottom: clamp(var(--space-xl), 7vw, 6rem);
}

.access-journey-guardrail > a {
  margin-top: var(--space-lg);
}

.access-journey-page a:hover {
  color: var(--bejiggi-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.access-journey-action-primary:hover {
  color: var(--bejiggi-on-accent);
  background: var(--bejiggi-action-hover);
}

[data-theme="dark"] .access-journey-kicker,
[data-theme="dark"] .access-journey-action-secondary,
[data-theme="dark"] .access-journey-action-secondary:hover,
[data-theme="dark"] .access-journey-guardrail > a,
[data-theme="dark"] .access-journey-guardrail > a:hover,
[data-theme="dark"] .access-journey-number,
[data-theme="dark"] .access-journey-page a:hover:not(.access-journey-action-primary) {
  color: #f2646f;
}

[data-theme="dark"] .access-journey-action-primary:hover {
  color: var(--bejiggi-on-accent);
  background: #d01a28;
}

.access-journey-page a:focus-visible,
.access-journey-page button:focus-visible {
  outline: 3px solid var(--ui-color-focus);
  outline-offset: 3px;
}

.access-journey-footer {
  border-top: 1px solid var(--ui-color-border);
  color: var(--ui-color-muted);
  background: var(--ui-color-surface);
  font-size: var(--ui-font-xs);
}

.access-journey-footer > div {
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 76px;
}

.access-journey-footer span:first-child {
  color: var(--ui-color-text);
  font-weight: 850;
}

@media (max-width: 920px) {
  .access-journey-header-inner,
  .access-journey-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .access-journey-header-inner {
    justify-content: center;
    padding-block: var(--space-md);
  }

  .access-journey-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .access-journey-section-heading > p {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .access-journey-stages {
    grid-template-columns: 1fr;
  }

  .access-journey-intro h1 {
    font-size: clamp(3rem, 17vw, 4.75rem);
  }

  .access-journey-footer > div {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-md);
  }
}

@media (max-width: 480px) {
  .access-journey-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-journey-nav > a {
    border: 1px solid var(--ui-color-border);
  }

  .access-journey-actions,
  .access-journey-actions > a,
  .access-journey-guardrail > a {
    width: 100%;
  }

  .access-journey-intro {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .access-journey-disclosure {
    padding: var(--space-md);
  }

  .access-journey-stages > li {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-journey-page *,
  .access-journey-page *::before,
  .access-journey-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
