:root {
  --ph-ink: #f4f8fc;
  --ph-muted: rgba(222, 233, 244, 0.72);
  --ph-faint: rgba(204, 222, 240, 0.46);
  --ph-bridge: rgba(201, 222, 240, 0.62);
  --ph-bg: #050b12;
  --ph-rule: rgba(191, 220, 246, 0.28);
  --ph-chrome-pad: calc(var(--aa-chrome-header-height, 150px) + env(safe-area-inset-top, 0px) + 8px);
}

html[data-theme="light"] {
  --ph-ink: #141820;
  --ph-muted: #3a4554;
  --ph-faint: rgba(58, 69, 84, 0.58);
  --ph-bridge: rgba(58, 69, 84, 0.72);
  --ph-bg: #e8f1fa;
  --ph-rule: rgba(168, 196, 220, 0.35);
}

html[data-theme="stellar"] {
  --ph-ink: #f4f8fc;
  --ph-muted: rgba(222, 233, 244, 0.72);
  --ph-faint: rgba(204, 222, 240, 0.46);
  --ph-bridge: rgba(201, 222, 240, 0.62);
  --ph-bg: #03070c;
  --ph-rule: rgba(191, 220, 246, 0.32);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html:has(body.ph-home) {
  height: 100%;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: none;
}

html,
body {
  margin: 0;
}

body.ph-home {
  height: 100svh;
  height: 100dvh;
  min-height: 0 !important;
  max-height: 100dvh;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: none;
  background: var(--ph-bg);
  color: var(--ph-ink);
}

body.ph-home .aa-chrome-header {
  position: fixed;
  inset: 0 auto auto 0;
  right: 0;
  z-index: 80;
}

body.ph-home .aa-chrome-header-spacer {
  display: none !important;
}

html[data-theme="light"] body.ph-home {
  background:
    radial-gradient(ellipse 120% 55% at 18% 0%, rgba(206, 228, 248, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 100% 65% at 88% 18%, rgba(192, 218, 242, 0.28) 0%, transparent 62%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(255, 255, 255, 0.65) 0%, transparent 68%),
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #eef5fc 28%,
      #e8f1fa 52%,
      #f3f9ff 78%,
      #ffffff 100%
    );
  background-repeat: no-repeat;
}

html[data-theme="light"] body.ph-home.toward-mission.aa-chrome-page {
  background:
    radial-gradient(ellipse 120% 55% at 18% 0%, rgba(206, 228, 248, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 100% 65% at 88% 18%, rgba(192, 218, 242, 0.28) 0%, transparent 62%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(255, 255, 255, 0.65) 0%, transparent 68%),
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #eef5fc 28%,
      #e8f1fa 52%,
      #f3f9ff 78%,
      #ffffff 100%
    ) !important;
  background-repeat: no-repeat;
  color: var(--ph-ink);
}

html[data-theme="stellar"] body.ph-home {
  background:
    radial-gradient(circle at 72% 18%, rgba(53, 92, 128, 0.14), transparent 32%),
    radial-gradient(circle at 8% 78%, rgba(43, 79, 112, 0.1), transparent 28%),
    linear-gradient(180deg, #03070c 0%, #07111c 54%, #081521 100%);
}

html[data-theme="stellar"] body.ph-home.toward-mission.aa-chrome-page {
  background:
    radial-gradient(circle at 72% 18%, rgba(53, 92, 128, 0.14), transparent 32%),
    radial-gradient(circle at 8% 78%, rgba(43, 79, 112, 0.1), transparent 28%),
    linear-gradient(180deg, #03070c 0%, #07111c 54%, #081521 100%) !important;
  color: var(--ph-ink);
}

html[data-theme="dark"] body.ph-home {
  background:
    radial-gradient(circle at 70% 12%, rgba(48, 84, 118, 0.16), transparent 34%),
    linear-gradient(180deg, #050b12 0%, #07111c 54%, #081521 100%);
}

html[data-theme="dark"] body.ph-home.toward-mission.aa-chrome-page {
  background:
    radial-gradient(circle at 70% 12%, rgba(48, 84, 118, 0.16), transparent 34%),
    linear-gradient(180deg, #050b12 0%, #07111c 54%, #081521 100%) !important;
  color: var(--ph-ink);
}

.ph-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  padding-top: calc(var(--ph-chrome-pad) + clamp(10px, 2.2vh, 20px));
  padding-left: max(var(--aa-chrome-rail-pad, 20px), env(safe-area-inset-left));
  padding-right: max(var(--aa-chrome-rail-pad, 20px), env(safe-area-inset-right));
  padding-bottom: clamp(16px, 2.4vh, 28px);
  overflow: hidden;
}

.ph-composition {
  width: 100%;
  max-width: 46rem;
  margin: 0;
  padding-top: clamp(2px, 1.2vh, 12px);
}

.ph-headline {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 0.96;
  font-size: clamp(2.75rem, 9.2vw, 5.2rem);
  text-wrap: balance;
}

.ph-headline__line {
  display: block;
}

.ph-support {
  max-width: 42ch;
  margin: clamp(12px, 1.8vh, 20px) 0 0;
  color: var(--ph-muted);
  font-size: clamp(1.2rem, 3.6vw, 1.4rem);
  font-weight: 450;
  line-height: 1.48;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.ph-mission-gateway {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(14px, 3.2vw, 22px);
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  max-width: none;
}

.ph-mission-gateway__link {
  display: inline-block;
  color: var(--ph-bridge);
  font-size: clamp(0.92rem, 2.1vw, 1.02rem);
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(191, 220, 246, 0.38);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ph-mission-gateway__link--login {
  color: var(--ph-faint);
  font-size: clamp(0.86rem, 1.9vw, 0.94rem);
  font-weight: 550;
  letter-spacing: 0.06em;
  border-bottom-color: rgba(191, 220, 246, 0.24);
}

html[data-theme="light"] .ph-mission-gateway__link {
  color: rgba(20, 24, 32, 0.78);
  border-bottom-color: rgba(31, 95, 115, 0.32);
}

html[data-theme="light"] .ph-mission-gateway__link--login {
  color: rgba(58, 69, 84, 0.62);
  border-bottom-color: rgba(31, 95, 115, 0.22);
}

.ph-mission-gateway__link:hover,
.ph-mission-gateway__link:focus-visible {
  color: var(--ph-ink);
  border-bottom-color: currentColor;
  outline: none;
}

html[data-theme="light"] .ph-mission-gateway__link:hover,
html[data-theme="light"] .ph-mission-gateway__link:focus-visible {
  color: rgba(14, 18, 26, 0.92);
}

html[data-theme="light"] .ph-mission-gateway__link--login:hover,
html[data-theme="light"] .ph-mission-gateway__link--login:focus-visible {
  color: rgba(20, 24, 32, 0.82);
}

.ph-mission-gateway__link:focus-visible {
  outline: 2px solid rgba(121, 189, 241, 0.45);
  outline-offset: 5px;
  border-radius: 1px;
}

html[data-theme="light"] .ph-mission-gateway__link:focus-visible {
  outline-color: rgba(31, 95, 115, 0.45);
}

@media (max-width: 430px) {
  .ph-headline {
    font-size: clamp(2.2rem, 10.4vw, 2.95rem);
  }

  .ph-support {
    max-width: 34ch;
    font-size: clamp(1.12rem, 4.1vw, 1.26rem);
    line-height: 1.46;
  }

  .ph-mission-gateway {
    gap: clamp(12px, 3.6vw, 18px);
  }

  .ph-mission-gateway__link {
    font-size: clamp(0.88rem, 2.4vw, 0.96rem);
  }

  .ph-mission-gateway__link--login {
    font-size: clamp(0.82rem, 2.2vw, 0.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ph-mission-gateway__link {
    transition: none;
    animation: none !important;
  }
}
