/* Landing page type, media, and motion. */
body.landing {
  --control-height: 42px;
  --control-padding: 16px;
  --control-inset: 4px;
}
.chat-cat {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  user-select: none;
  font:
    32px / 1 "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;
  transform: translate(-50%, -75%);
}

.intro-art {
  inset: 0;
  width: 100%;
  height: 100svh;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  /* Intersecting horizontal and vertical fades for a soft rectangle. */
}
.intro-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10101038, #10101080 55%, #10101099);
}
.intro-dissolve {
  --dissolve-blur: clamp(6px, 0.7vw, 10px);
}
.intro-copy {
  position: relative;
  margin-left: calc(50% + var(--gutter) / 2);
  width: calc(50% - var(--gutter) / 2 - var(--margin));
}
.hero-signup {
  position: relative;
  z-index: 0;
  width: min(328px, calc(100vw - 2 * var(--margin)));
  margin: 32px 0 0 var(--margin);
  font: 500 16px / 1.1 var(--sans);
  pointer-events: auto;
}
.hero-signup-copy {
  margin: 0 4px 20px;
  font: 400 15px / 1.45 var(--sans);
  color: var(--muted);
  letter-spacing: 0;
}
.landing .email-row {
  align-items: center;
  gap: 8px;
  height: var(--control-height);
  padding: var(--control-inset);
  /* Keep placeholder contrast stable over the hero and footer artwork. */
  background: #2d2d2d;
  border-radius: 999px;
}
.landing .email-row input {
  height: calc(var(--control-height) - 2 * var(--control-inset));
  min-height: 0;
  padding: 0 calc(var(--control-padding) - var(--control-inset));
  background: transparent;
  font-size: 16px;
}
.landing .email-row button {
  height: calc(var(--control-height) - 2 * var(--control-inset));
  min-height: 0;
  padding: 0 var(--control-padding);
  background: #fff;
}
.hero-signup .email-row button {
  flex: 0 0 calc(var(--control-height) - 2 * var(--control-inset));
  padding: 0;
  display: grid;
  place-items: center;
}
.hero-signup .email-row button img {
  display: block;
  width: 18px;
  height: 18px;
}
.identity-nav {
  position: relative;
  z-index: 1;
}
.identity a {
  pointer-events: auto;
}
.landing a,
.landing button,
.landing input,
.identity-nav {
  font-weight: 400;
}
.identity-nav .waitlist-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  padding: 12px var(--control-padding);
  background: rgb(255 255 255 / 12%);
}
.identity-nav .social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.footer-utility,
.identity-nav .footer-link {
  display: none;
}
.identity[data-footer-visible="true"] .identity-nav .footer-link {
  display: inline-flex;
}
.footer-link svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.landing .identity[data-footer-visible="true"] .identity-nav > .waitlist-link {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s;
  width: 0;
  max-width: 0;
  padding-inline: 0;
  overflow: hidden;
}
.identity[data-footer-visible="true"] .identity-nav {
  gap: 16px;
}
@media (min-width: 761px) {
  .identity-nav {
    width: max-content;
    min-height: var(--control-height);
    max-width: calc(50vw - var(--margin) - var(--gutter) / 2);
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  body.landing {
    --control-height: 52px;
    --control-padding: 20px;
    --control-inset: 6px;
  }
  .landing .email-row input,
  .footer-signup .email-row button {
    font-size: 17px;
  }
  .hero-signup .email-row button img {
    width: 20px;
    height: 20px;
  }
  .social-link {
    display: inline-block;
    font-size: 11px;
  }
  .intro-copy {
    margin-inline: var(--margin);
    width: calc(100% - 2 * var(--margin));
  }
  .intro-art::after {
    background: linear-gradient(#10101038, #10101099 65%, #101010b3);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .intro-ready .identity-nav {
    opacity: 1;
    visibility: visible;
  }
  .identity[data-signup-state] .hero-signup {
    transition:
      opacity 180ms ease,
      visibility 0s;
  }
  .identity[data-signup-state="story"] .hero-signup {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 180ms ease,
      visibility 0s 180ms;
  }
  .identity[data-signup-state] .identity-nav > * {
    opacity: 0;
    translate: 0 10px;
    filter: blur(4px);
    transition:
      opacity 300ms ease,
      translate 420ms var(--spring),
      filter 300ms ease,
      var(--interaction-transition);
  }
  .identity[data-signup-state="story"] .identity-nav > * {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transition-delay: 180ms, 180ms, 180ms, 0s, 0s, 0s, 0s, 0s;
  }
  .identity[data-signup-state="story"] .identity-nav > :last-child {
    transition-delay: 240ms, 240ms, 240ms, 0s, 0s, 0s, 0s, 0s;
  }
  .intro-ready .hero-signup {
    position: fixed;
    left: var(--margin);
    bottom: max(var(--margin), env(safe-area-inset-bottom));
    margin: 0;
  }
  .page-entering .hero-signup {
    animation: scene-entrance 1200ms ease both;
  }
  .intro-ready .closing-art {
    overflow: clip;
    opacity: var(--footer-art-opacity, 1);
  }
  .intro-ready .closing-art img {
    height: calc(100% + 36px);
    transform: translate3d(0, var(--footer-art-y, 0px), 0);
  }
  .intro-ready .intro-copy {
    display: block;
    height: min(420px, 48svh);
    /* Lines fade themselves out; let their blur extend beyond the reading band. */
    overflow: visible;
  }
  .intro-ready .intro-wheel-track {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.71svh, 38px);
    will-change: transform;
  }
  .intro-ready .intro-paragraph {
    grid-area: auto;
    flex: none;
    margin: 0;
    opacity: 1;
  }
}

/* Give the expanded story copy its own spacing and headline proportions. */
.body-copy {
  font-size: 15px;
  font-weight: 400;
}
.footer-description {
  font-size: 12px;
}
.story {
  gap: clamp(72px, 9vw, 128px);
}
.story .scene {
  min-height: 0;
  padding-top: 0;
  gap: clamp(24px, 3vw, 32px);
}
.story .scene--ending {
  margin-top: clamp(64px, 8vw, 128px);
}
.story .you-title {
  min-height: 0;
  margin-bottom: 16px;
  font-size: 12.5cqw;
  line-height: 1.08;
}
.story .inset-copy {
  min-height: 0;
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font: 500 15px / 1.45 var(--sans);
  color: var(--ink);
}
.feature-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--icon-color);
  opacity: 1;
}
.story .closing-title {
  min-height: 0;
  margin-bottom: 0;
  font-size: 16cqw;
}
.feature-icon--ochre {
  --icon-color: #dfb16c;
}
.feature-icon--ember {
  --icon-color: #df8c70;
}
.feature-icon--blue {
  --icon-color: #8ebdc9;
}
.feature-icon--sage {
  --icon-color: #b6bc86;
}
.story .footer-signup {
  --control-inset: 5px;
  width: min(100%, 500px);
  align-self: flex-start;
  gap: 16px;
}
.footer-signup .email-row button {
  padding-inline: calc(var(--control-padding) - 2px);
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .intro-ready .intro + .story {
    /* Bring the story in during the hero fade, after the signup has exited. */
    margin-top: -45svh;
    padding-top: clamp(16px, 2svh, 24px);
  }
  .identity::before {
    opacity: var(--header-opacity, 0);
  }
  .intro-ready .intro-copy {
    top: 43%;
    height: min(460px, 52svh);
  }
  .intro-ready .intro-wheel-track {
    gap: clamp(32px, 5svh, 44px);
  }
}
@media (max-width: 760px) and (max-height: 600px) and (prefers-reduced-motion: no-preference) {
  .intro-ready .intro-copy {
    top: 43%;
    height: 42svh;
  }
}
@media (max-width: 760px) {
  .identity {
    align-items: center;
  }
  .identity-description,
  .landing .identity .identity-nav .social-link {
    display: none;
  }
  .identity-nav {
    font-size: 17px;
  }
  .story {
    gap: 96px;
    /* Leave enough scroll runway for the browser to lift the form above a keyboard. */
    padding-bottom: calc(
      clamp(260px, 42svh, 400px) + env(safe-area-inset-bottom)
    );
  }
  .story .scene {
    gap: 32px;
  }
  .feature-copy {
    gap: 12px;
  }
  .body-copy {
    line-height: 1.6;
  }
  .story .you-title {
    margin-bottom: 0;
  }
  .story .closing-title {
    font-size: 24.5cqw;
  }
  .hero-signup-copy {
    margin-bottom: 16px;
  }
  .story .footer-signup {
    --control-inset: 6px;
    gap: 32px;
  }
  .footer-signup input {
    scroll-margin-block: 120px;
  }
  .story .scene--ending {
    position: static;
    gap: 8px;
  }
  .scene--ending .footer-utility {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(22px, env(safe-area-inset-bottom));
    justify-content: flex-start;
    align-items: center;
    margin: 0;
  }
  .footer-links {
    display: contents;
  }
  .scene--ending .footer-utility .social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #101010b3;
    color: #ffffffcc;
    font: 400 13px / 1.4 var(--sans);
  }
  .scene--ending .footer-utility .social-link svg {
    width: 14px;
    height: 14px;
  }
  .closing-art {
    mask-image: linear-gradient(var(--fade-angle), transparent 12%, #000 72%);
  }
  .closing-art-blur {
    mask-image: linear-gradient(var(--fade-angle), #000 38%, transparent 78%);
  }
  .closing-art-blur:nth-of-type(2) {
    mask-image: linear-gradient(var(--fade-angle), #000 28%, transparent 64%);
  }
  .closing-art-blur:nth-of-type(3) {
    mask-image: linear-gradient(var(--fade-angle), #000 18%, transparent 50%);
  }
  .identity[data-signup-state] .identity-nav > .waitlist-link {
    opacity: 1;
    translate: none;
    filter: none;
    transition-delay: 0s;
  }
  .story .footer-signup {
    width: 100%;
  }
}
/* Small overshoots give hover and press states a soft spring response. */
body.landing {
  --spring: cubic-bezier(0.22, 1.5, 0.36, 1);
  --interaction-transition:
    transform 480ms var(--spring), background-color 220ms ease,
    color 220ms ease, box-shadow 350ms ease, text-shadow 350ms ease;
}
.landing a,
.landing button,
.landing input,
.landing .email-row,
.social-link {
  transition: var(--interaction-transition);
}
.landing a,
.landing button {
  touch-action: manipulation;
}
.identity .wordmark {
  transform-origin: left center;
}
.landing .email-row:focus-within {
  background: #454545;
}
.email-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.landing .email-field input {
  display: block;
  width: 100%;
}
.waitlist-form .form-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-inline: calc(var(--control-padding) - var(--control-inset));
  margin: 0;
  pointer-events: none;
  color: #ffffff99;
  font: 400 13px / 1.2 var(--sans);
}
.email-field:has(.form-status:not(:empty)) input {
  opacity: 0;
}
.landing .waitlist-form[data-state="error"] .email-row {
  background: #df8c7026;
  box-shadow: 0 0 24px #df8c7012;
}
.landing .waitlist-form[data-state="error"] .email-row:focus-within {
  background: #df8c7038;
}
.waitlist-form[data-state="error"] .form-status {
  color: #e6a28b;
}
.waitlist-form[data-state="success"] .form-status {
  color: #d1d9b4;
}
.landing
  .waitlist-form:is([data-state="sending"], [data-state="success"])
  button {
  position: relative;
  color: transparent;
  background: #fff;
  cursor: default;
}
.waitlist-form:is([data-state="sending"], [data-state="success"]) button img {
  visibility: hidden;
}
.waitlist-form[data-state="sending"] button::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid #10101033;
  border-top-color: #101010;
  border-radius: 50%;
  animation: waitlist-spin 800ms linear infinite;
}
.waitlist-form[data-state="success"] button::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #101010;
  font-size: 20px;
}
@keyframes waitlist-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .waitlist-form[data-state="sending"] button::after {
    animation: none;
  }
}
.landing .email-row input:hover,
.landing .email-row input:focus {
  background: transparent;
}
.landing input:focus-visible {
  outline: none;
}
.landing a:focus-visible,
.landing button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #ffffff40,
    0 0 24px #e5cfaa26;
}
@media (hover: hover) and (pointer: fine) {
  .identity .wordmark:hover {
    transform: translateY(-2px) scale(1.04);
    color: var(--ink);
    text-shadow:
      0 0 12px #fff6,
      0 0 32px #e5cfaa59;
  }
  .identity-nav .waitlist-link:hover {
    transform: translateY(-2px) scale(1.035);
    color: inherit;
    box-shadow:
      0 0 14px #ffffff1f,
      0 0 32px #e5cfaa26;
    text-shadow: 0 0 12px #ffffff66;
  }
  .landing button:not(:disabled):hover {
    transform: translateY(-1px) scale(1.045);
    background: #fff;
    box-shadow:
      0 0 16px #ffffff40,
      0 0 36px #e5cfaa33;
  }
  .landing .email-row:hover {
    box-shadow:
      0 0 20px #ffffff0d,
      0 0 36px #e5cfaa14;
  }
  .hero-signup .email-row button:hover {
    transform: scale(1.06);
  }
  .social-link:hover {
    transform: translateY(-2px);
    text-shadow:
      0 0 10px #ffffffb3,
      0 0 28px #e5cfaa80;
  }
}
.landing button:not(:disabled):active,
.identity a:active {
  transform: scale(0.96);
  transition-duration: 130ms;
}
@media (prefers-reduced-motion: reduce) {
  .landing a,
  .landing button,
  .landing input,
  .landing .email-row,
  .social-link {
    transition: none;
  }
  .landing a:hover,
  .landing button:hover,
  .landing a:active,
  .landing button:active,
  .social-link:hover {
    transform: none;
  }
}

/* Keep the 1440px composition centered on larger displays. Only the content
   follows these gutters; the hero and closing artwork remain viewport-wide. */
@media (min-width: 1440px) {
  body.landing {
    --content-inset: calc((100vw - 1360px) / 2);
  }
  .identity,
  .skip-link,
  .intro-ready .hero-signup {
    left: var(--content-inset);
  }
  .hero-signup {
    margin-left: var(--content-inset);
  }
  .landing .intro-copy {
    width: calc(680px - var(--gutter) / 2);
  }
  .story {
    margin-right: var(--content-inset);
  }
  .intro-paragraph {
    font-size: 32px;
  }
}