/* Overthinkers Gang / Pathways — landing card
   Implements coming-soon-spec.md sections 2-6.
   v2: whole card scaled down ~0.78 linear (~40% less area) — see spec 4. */

/* ---- Font. Drop the woff2 files in /assets/fonts/ (spec 11). ---- */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg-page:        #46424E;
  --bg-page-lower:  #3B3743;
  --bg-overlay:     rgba(30, 27, 36, 0.45);

  --surface-card:   #2E2C34;
  --surface-input:  #242229;

  --text-primary:   #FFFFFF;
  --text-body:      #C9C5D1;
  --text-muted:     #8E8A98;
  --text-on-accent: #2E2C34;

  --accent-eyebrow: #A78BFA;

  --grad-1: #8FF0A5;
  --grad-2: #B9D0EF;
  --grad-3: #CBA9F0;
  --grad-4: #F5B3A1;

  --gradient-spectrum: linear-gradient(90deg,
    var(--grad-1) 0%, var(--grad-2) 34%, var(--grad-3) 68%, var(--grad-4) 100%);
  --gradient-cta: linear-gradient(90deg, #8FF0A5 0%, #C6B4F3 100%);

  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  font-family: var(--font-mono);
  /* Two-tone wash: instant paint, and the permanent look if no photo is
     ever dropped in. The photo (::before, below) paints over this. */
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page) 48%,
                              var(--bg-page-lower) 52%, var(--bg-page-lower) 100%);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Backdrop photo ----
   Drop a file at /assets/backdrop.jpg and it appears automatically — no
   other change needed. Missing file = transparent layer = the gradient
   above still shows, so there is no broken-image state.
   See coming-soon-spec.md section 11 for what to generate.

   position:fixed on a pseudo-element (not background-attachment:fixed on
   body) because iOS Safari has long-standing jank/repaint bugs with fixed
   backgrounds; a fixed-position layer avoids that class of bug entirely.

   The filter is what lets the source photo be roughly-right rather than
   precisely graded — any dusk/desaturated landscape lands in the same
   place once this runs. Don't reapply this grading in the image itself;
   feed the filter a normally-exposed photo and let it do the work. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/backdrop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.55) brightness(0.82) contrast(1.05) hue-rotate(-6deg);
}

/* Scrim: sits above the photo, darkens it, matches --bg-overlay exactly
   so the card reads the same whether the photo has loaded or not. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg-overlay);
}

.card { position: relative; z-index: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Card ---- */
.card {
  width: 100%;
  max-width: 560px;          /* was 720 */
  background: var(--surface-card);
  border-radius: 16px;       /* was 20 */
  overflow: hidden;
}

.card__body { padding: 40px 44px 36px; }   /* was 60 60 52 */

/* ---- Type ---- */
.eyebrow {
  margin: 0;
  font-size: 13px;           /* was 15 */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-eyebrow);
}

.headline {
  margin: 18px 0 0;                          /* was 24 */
  font-size: clamp(26px, 6vw, 42px);         /* was clamp(34px, 7.8vw, 56px) */
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text-primary);
}

.lede {
  margin: 20px 0 0;          /* was 28 */
  max-width: 440px;          /* was 560 */
  font-size: 13px;           /* was 15 */
  line-height: 1.7;
  color: var(--text-body);
}

/* ---- Form ---- */
.signup { margin: 28px 0 0; }               /* was 40 */

.signup__row { display: flex; gap: 16px; }  /* was 24 */

.field {
  flex: 1;
  min-width: 0;
  height: 48px;              /* was 62 */
  padding: 0 18px;           /* was 22 */
  border: 0;
  border-radius: 8px;        /* was 10 */
  background: var(--surface-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;           /* was 15 */
}
.field::placeholder { color: var(--text-muted); }
.field:focus-visible {
  outline: 1px solid rgba(199, 169, 240, 0.55);
  outline-offset: 2px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;                  /* was 12 */
  height: 48px;              /* was 62 */
  padding: 0 22px;           /* was 30 */
  border: 0;
  border-radius: 8px;        /* was 10 */
  background: var(--gradient-cta);
  color: var(--text-on-accent);
  font-family: inherit;
  font-size: 12px;           /* was 13 */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 120ms ease-out, transform 120ms ease-out;
}
/* Overrides the inline width/height attributes in index.php. */
.cta__arrow { width: 15px; height: 15px; }
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }
.cta[disabled] { opacity: 0.65; cursor: default; }
.cta[disabled]:hover { filter: none; }

.consent {
  margin: 10px 0 0;
  max-width: 440px;          /* was 560 */
  font-size: 11px;           /* was 12 */
  line-height: 1.6;
  color: var(--text-muted);
}
.consent a { color: var(--text-body); }

.status {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 12px;           /* was 13 */
  line-height: 1.6;
}
.status--ok    { color: var(--grad-1); }
.status--error { color: #F0A79A; }

/* Honeypot: off-canvas, never display:none (spec 9.4). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success replaces the form entirely (spec 8.4). */
.signup.is-done .signup__row,
.signup.is-done .consent { display: none; }
.signup.is-done .status { font-size: 14px; margin-top: 0; }

/* ---- Social ---- */
.social {
  display: flex;
  align-items: center;
  gap: 22px;                 /* was 30 */
  margin-top: 14px;          /* 28 minus the consent line, per spec 5 */
}
.social a {
  display: inline-flex;
  color: var(--text-body);
  transition: color 160ms ease-out;
}
/* Overrides the inline width/height attributes in index.php. */
.social svg { width: 18px; height: 18px; }
.social a:hover { color: var(--text-primary); }
.social a:focus-visible { outline: 2px solid var(--accent-eyebrow); outline-offset: 4px; border-radius: 4px; }

/* ---- Countdown ---- */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 140px;             /* was 210 */
  background: var(--gradient-spectrum);
}

.unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;                 /* was 14 */
  color: var(--text-on-accent);
}
.unit + .unit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;                 /* was 48 */
  bottom: 32px;
  width: 1px;
  background: rgba(46, 44, 52, 0.22);
}

.unit__num {
  font-size: 44px;           /* was 64 */
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.unit__label {
  font-size: 11px;           /* was 13 */
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* ---- Responsive (spec 4) ---- */
@media (max-width: 780px) {
  /* The card is already viewport-wide here, so the 35% has to come out of
     the vertical rhythm rather than the width. */
  .card__body { padding: 24px 20px 28px; }   /* was 36 28 */
  .headline   { font-size: clamp(24px, 6.6vw, 32px); margin-top: 14px; }
  .lede       { margin-top: 16px; font-size: 12px; line-height: 1.65; }
  .signup     { margin-top: 22px; }
  .social     { margin-top: 12px; }
}

@media (max-width: 620px) {
  /* Keep the page gutter at 20px so the card does not get *wider* than it
     was on phones once the body padding shrinks. */
  body { padding: 24px 20px; }
  .signup__row { flex-direction: column; gap: 10px; }
  .field, .cta { height: 44px; }             /* was 62 */
  .cta { width: 100%; justify-content: center; }
  .countdown { height: 84px; }               /* was 150 */
  .unit { gap: 6px; }
  .unit__num { font-size: 26px; }            /* was 40 */
  .unit + .unit::before { top: 20px; bottom: 20px; }
}

@media (max-width: 420px) {
  .countdown { height: 78px; }
  .unit__num { font-size: 24px; }            /* was 32 */
  .unit__label { font-size: 10px; }
  .social { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}