/* ============================================================
   marketing.css — the three public pages only (index.html, signup.html,
   forgot-password.html): hero carousel + watermark, the access-pass panel's
   copy and auth forms, plan pickers and the Stripe payment dialog.
   Requires main.css (tokens + .stage/.pass-panel primitives) loaded first.
   The console never loads this file.
   ============================================================ */

:root {
  /* One height for every auth field and button. 2.2rem is 44px at Pico's
     20px desktop root; the 44px floor keeps a full touch target on phones,
     where Pico drops the root to 16px. */
  --pass-control-h: max(2.2rem, 44px);
  /* Never under 16px: iOS Safari zooms the page when a focused field's text
     is smaller than that. */
  --pass-control-font: max(0.8rem, 16px);
}

/* ---- Plan picker + payment dialog (signup) ---- */

.plan-options {
  display: grid;
  /* One plan since 2026-08-25: the SIGN UP button and its note sit centered
     under the form fields at full field width. (Restore 1fr 1fr if the
     annual option returns.) */
  grid-template-columns: 1fr;
  gap: 1rem;
  /* No top margin: the status line above already spaces the button, and the
     space on either side of that line has to match. */
  margin-top: 0;
  text-align: center;
}

.plan-options button {
  margin-bottom: 0.5rem;
}

.plan-price {
  font-size: 0.9rem;
  color: var(--paper-dim);
}

#payment-dialog article {
  width: 100%;
  max-width: 30rem;
}

#checkout-container {
  min-height: 20rem;
}

/* ---- Access-pass panel copy + auth forms ---- */

.pass-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.75rem;
}

.pass-headline {
  font-family: "Fraunces", "Avenir Next", serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.pass-subhead {
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 22rem;
  margin: 0 0 2.25rem;
}

/* ---- Primary button ----
   Two-class selector: .plan-options button and Pico's button[type=submit] are
   both (0,1,1) and outrank a lone class. */
.pass-panel .pass-cta {
  width: 100%;
  height: var(--pass-control-h);
  margin: 0;
  padding: 0 1.5rem;
  border: none;
  border-radius: 8px;
  background: var(--teal);
  box-shadow: none;
  color: var(--on-fill-dark);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pass-panel .pass-cta:hover {
  background: var(--chart-teal);
  color: var(--on-fill-light);
  transform: translateY(-1px);
}

/* Ring only, no lift: validation moves focus off the button, and a lift
   would drop it 1px at the moment the message appears. */
.pass-panel .pass-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(95, 162, 164, 0.35);
}

.pass-panel .pass-cta:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.pass-auth {
  position: relative;
}

.pass-login-form {
  display: flex;
  flex-direction: column;
  /* The whole spacing between fields: Pico's own bottom margin on inputs is
     zeroed below, so nothing else adds to this. */
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pass-login-form.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Auth fields ----
   Pico loads first and skins every input light. Its sizing rules are (0,1,1),
   e.g. input:not([type=checkbox],[type=radio],[type=range]){height:…}, so
   these selectors tie them and win only because this file loads after Pico.
   Pico's :focus and [aria-invalid] rules mostly set --pico-* variables;
   writing background, border, color and box-shadow as literals here is what
   stops those variables from ever being read. */
.pass-login-form input {
  height: var(--pass-control-h);
  margin: 0;
  padding: 0 0.8rem;
  background: rgba(var(--wash-rgb), 0.05);
  border: 1px solid rgba(var(--wash-rgb), 0.22);
  border-radius: 8px;
  color: var(--paper);
  font-family: inherit;
  font-size: var(--pass-control-font);
  box-shadow: none;
}

.pass-login-form input::placeholder {
  color: var(--paper-dim);
  opacity: 0.7;
}

.pass-login-form input:focus {
  border-color: var(--teal-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(95, 162, 164, 0.22);
}

/* Chrome and Safari paint an autofilled field pale blue with dark text from
   their own stylesheet, with !important, so the background can only be
   covered. The inset shadow is the cover: #272320 is the field's 5% wash
   flattened onto --ink. transition: none stops Pico's 0.2s box-shadow
   transition from flashing the pale fill first. */
.pass-login-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  caret-color: var(--paper);
  box-shadow: 0 0 0 1000px #272320 inset;
  transition: none;
}

.pass-login-form input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #272320 inset, 0 0 0 3px rgba(95, 162, 164, 0.22);
}

/* A field that failed validation. marketing.js sets aria-invalid="true" and
   REMOVES the attribute afterwards; never "false", which Pico paints green.
   Pico decorates [aria-invalid] itself: a warning icon at (0,2,1) and
   !important paddings to make room for it. This selector ties the icon rule
   and wins on order; the paddings need !important to answer !important.
   Placed after :focus so a focused invalid field stays in the error ink. */
.pass-login-form input[aria-invalid="true"] {
  border-color: var(--error-text);
  background-image: none;
  padding: 0 0.8rem !important;
  padding-inline: 0.8rem !important;
}

.pass-login-form input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(224, 138, 125, 0.22);
}

/* ---- Status line ----
   The form's one message line: validation, server errors, the reset-success
   note. It ALWAYS holds one line of height, empty or not. The panel is
   vertically centered, so anything that grows the form pushes the fields up
   and the button down at once.
   A long server message wraps to two lines. The box stays one line tall and
   align-items: center lets the text spill evenly above and below, into the
   margin + form gap, which together are deeper than half a line. Two lines is
   the ceiling for every message in the three pages' tables, down to 320px. */
.pass-form-status {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 1.3em;
  margin: 0.25rem 0;
  color: var(--error-text);
  font-size: max(0.7rem, 13px);
  line-height: 1.3;
}

.pass-form-status.is-success {
  color: var(--teal-ink);
}

/* Explanatory line inside a reset form — what the step is asking for. */
.pass-login-note {
  color: var(--paper-dim);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 0.35rem;
}

.pass-login-note strong {
  color: var(--paper);
  font-weight: 600;
}

/* The 6-digit reset code. Spaced out so digits are read individually, which is
   what makes a transcription slip visible before it's submitted.
   Two classes: the field rule above is (0,1,1) and sets font-size. */
.pass-login-form .pass-code-input {
  text-align: center;
  font-size: 1.35rem;
  letter-spacing: 0.5em;
  /* letter-spacing trails the last character too — pull the text back so the
     digits look centered rather than sitting half a space to the left. */
  text-indent: 0.5em;
}

.pass-forgot {
  align-self: center;
  font-size: 0.8rem;
  color: var(--paper-dim);
  text-underline-offset: 3px;
}

.pass-forgot:hover {
  color: var(--teal-ink);
}

.pass-signup {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--paper-dim);
  text-align: left;
}

.pass-signup a {
  color: var(--paper);
  text-underline-offset: 3px;
}

.pass-signup a:hover {
  color: var(--teal-ink);
}

/* ---- Hero carousel + watermark ---- */

.carousel-panel {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--ink);
}

.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-layer.is-active {
  opacity: 1;
}

.everyone-in-layer {
  display: none;
  position: absolute;
  inset: -15% -20%;
  z-index: 1;
  overflow: hidden;
  transform: rotate(-6deg);
  color: rgba(var(--wash-rgb), 0.10);
  font-family: "Fraunces", "Avenir Next", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.2;
  text-align: center;
  word-spacing: 0.4em;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .carousel-panel {
    display: none; /* main.css makes the pass panel the whole page here */
  }
}

/* Short desktop windows. The login form is on the page from load, which makes
   the panel 772px of content; on a laptop with the dock showing that pushed
   "Forgot Password?" below the fold. Trimming these three gaps brings it to
   712px. Desktop layout only — the phone layout has its own padding in
   main.css and already fits. */
@media (max-height: 780px) and (min-width: 901px) {
  .pass-panel__inner {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .pass-logo {
    margin-bottom: 0.75rem;
  }

  .pass-subhead {
    margin-bottom: 1.25rem;
  }
}