/* ===========================================================================
   Access request (lead capture) for the static marketing pages.
   Signup is not open: the visitor leaves an email, we invite by hand later.

   ONE stylesheet shared by story.html / feeding-story.html / naps-story.html,
   instead of a third copy of the same rules in each page's <style>. Values come
   from /tokens.css, which every page already imports. Denim = the primary
   action of the design system, so the card and the button are denim.

   The only page classes reused here are .wrap, section and .kicker (present in
   all three). Everything else is self-contained, so the section renders the same
   whichever page it sits on.
   =========================================================================== */

.access {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 40px;
  background: linear-gradient(160deg, var(--denim-surface) 0%, var(--card) 72%);
  border: 1px solid var(--denim-border);
  box-shadow: 0 20px 44px -26px rgba(38, 41, 61, 0.24);
}

/* Soft denim halo, same trick as the hero backgrounds. */
.access::after {
  content: "";
  position: absolute;
  inset: auto -60px -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 186, 214, 0.32), rgba(169, 186, 214, 0) 68%);
  pointer-events: none;
}

.access > * {
  position: relative;
  z-index: 1;
}

.access h2 {
  font-family: var(--fr);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  margin: 12px 0 14px;
  max-width: 24ch;
}

.access-lede {
  font-size: 17px;
  color: #4b4c5c;
  max-width: 56ch;
  text-wrap: pretty;
}

.access-form {
  margin-top: 26px;
  max-width: 560px;
}

/* The field needs a real label for screen readers; the placeholder carries it
   visually. */
.access-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.access-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.access-input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--hk);
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 14px 20px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.access-input::placeholder {
  color: var(--muted-foreground);
}

.access-input:focus-visible {
  outline: none;
  border-color: var(--denim-light);
  box-shadow: 0 0 0 4px rgba(62, 92, 138, 0.16);
}

.access-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fr);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  background: var(--denim);
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(62, 92, 138, 0.3);
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}

.access-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(62, 92, 138, 0.38);
}

.access-btn svg {
  transition: transform 0.18s;
}

.access-btn:hover svg {
  transform: translateX(3px);
}

.access-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* Bot trap: off-screen rather than display:none, which some bots skip. */
.access-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.access-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted-foreground);
  max-width: 52ch;
}

.access-status {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  min-height: 1.6em;
}

.access-status.is-ok {
  color: var(--sage-fg);
}

.access-status.is-error {
  color: var(--clay-fg);
}

@media (max-width: 640px) {
  .access {
    padding: 30px 22px;
  }

  .access-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-btn,
  .access-btn svg,
  .access-input {
    transition: none;
  }

  .access-btn:hover {
    transform: none;
  }
}