/*
 * zagoat waitlist. Every color, font, size and spacing step is a token below; rules use tokens only.
 * Palette: the main app's "alpine dusk" (approved 2026-10-21), copied as values, not imported.
 *   logo body #96D927 (sampled) -> --brand: the buttons, the things to act on
 *   dusk #1B1E33 (hue 232°, near the lime's 263° complement) -> --page, so the goat stands out
 * Dark only (owner's call, 2026-10-27): the lime logo is made for a dark background, and on a
 * light page it washed out. Contrast is checked by script (see README).
 *
 * The one bold element is the slogan, which types itself out once on load and ends on a lime
 * cursor: "Practice real tasks." in haze, "Get a real job." in snow.
 */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --page: #1b1e33; /* dusk */
  --panel: #232742; /* ridge: the dialog */
  --line: #3d4366;
  --field-bg: #1b1e33; /* fields sit sunken in the dialog */
  --field-border: #7a80a6;
  --ink: #f1f3ec; /* snow */
  --muted: #b3b8cf; /* haze */
  --link: #b4e86a;
  --brand: #96d927; /* logo body */
  --brand-hover: #c6ee83; /* logo facets */
  --on-brand: #1b1e33;
  --focus: #b4e86a;
  --done: #b4e86a;
  --cursor: #96d927; /* logo body */
  --danger: #ff7d7d;
  --backdrop: rgb(12 14 28 / 0.72);
  --shadow: 0 24px 64px rgb(8 10 24 / 0.55);
  --ridge-shade: #232742;
  --ridge-lit: #2e3353;

  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;

  /* Scale: 14 / 17 / 20 / 28, and the slogan up to 112. Its longest line is about 6.6em wide,
     so 14.4vw - 4px fills a phone between the 16px gutters without ever scrolling sideways. */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-slogan: clamp(2rem, 14.4vw - 4px, 7rem);
  /* Side by side with the goat (900px and wider), the slogan shares the row, so it's smaller. */
  --step-slogan-wide: clamp(4rem, 6.6vw, 6rem);
  --step-name: 2rem;
  --step-name-wide: 2.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  --gutter: 1rem;
  --dialog-width: 27rem;
  --logo: 132px;
  --logo-wide: 200px;
  --ridge-height: clamp(56px, 11vh, 120px);

  /* One chamfered corner instead of a uniform radius: the facet from the low-poly logo. */
  --facet: 9px;
  --facet-large: 11px;
  --radius: 3px;
  --control-height: 2.75rem;
  --button-height: 3rem;
  --button-large-height: 3.5rem;

  --blink-duration: 1.1s;
  --blink-count: 4;
}

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

/* Rules like `.form { display: flex }` would otherwise override the hidden attribute. */
[hidden] {
  display: none !important;
}

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--gutter) var(--space-8);
  text-align: center;
}

/* The slogan */

.slogan {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--step-slogan);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.slogan-line {
  display: block;
}

.slogan-quiet {
  color: var(--muted);
}

/* While typing, the untyped rest of a line keeps its space, so nothing shifts. */
.slogan-rest {
  visibility: hidden;
}

/* The cursor's margins add up to zero width, so moving it never nudges the centered lines.
   It blinks four times (under the 5 s WCAG limit for automatic blinking), then stays lit. */
.cursor {
  display: inline-block;
  width: 0.09em;
  height: 0.76em;
  margin: 0 -0.15em 0 0.06em;
  background: var(--cursor);
  vertical-align: -0.02em;
  animation: blink var(--blink-duration) steps(1) var(--blink-count);
}

.cursor.is-typing {
  animation: none;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

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

/* Brand lockup */

.brand {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  display: block;
  width: var(--logo);
  height: var(--logo);
}

/* The logo file has empty glow space under the goat's chin; pull the name up into it. */
.name {
  margin: calc(var(--logo) * -0.06) 0 0;
  font-family: var(--font-heading);
  font-size: var(--step-name);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Call to action */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-8);
}

.cta-done {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
}

.cta-done:focus {
  outline: none;
}

.offer {
  margin: var(--space-5) 0 0;
  text-wrap: balance;
}

.note {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.note a {
  margin-left: var(--space-2);
}

/* The two links wrap together, never one per line. */
.note-links {
  white-space: nowrap;
}

/*
 * Buttons. The chamfered lime fill is drawn by ::before, so the button itself isn't clipped
 * and its focus ring stays visible.
 */

.button {
  position: relative;
  isolation: isolate;
  height: var(--button-height);
  margin-top: var(--space-1);
  padding: 0 var(--space-6);
  border: 0;
  background: none;
  color: var(--on-brand);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  --cut: var(--facet);
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brand);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background-color 150ms ease;
}

.button:hover::before {
  background: var(--brand-hover);
}

.button:disabled {
  cursor: progress;
  opacity: 0.6;
}

.button:disabled:hover::before {
  background: var(--brand);
}

.button-large {
  min-width: 17rem;
  height: var(--button-large-height);
  margin-top: 0;
  padding: 0 var(--space-10);
  font-size: var(--step-1);
  --cut: var(--facet-large);
}

.button-quiet {
  height: var(--control-height);
  margin-top: var(--space-6);
  padding: 0 var(--space-6);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.button-quiet:hover {
  border-color: var(--ink);
}

/* The dialog */

.dialog {
  width: min(var(--dialog-width), calc(100% - 2 * var(--gutter)));
  max-height: calc(100svh - 2 * var(--gutter));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(3px);
}

.dialog[open] {
  animation: dialog-in 160ms ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.dialog-body {
  padding: var(--space-6);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.dialog-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
}

.dialog-lead {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--muted);
  text-wrap: balance;
}

.close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.375rem -0.375rem 0 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.close:hover {
  background: var(--field-bg);
  color: var(--ink);
}

.close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

.dialog-note {
  margin-top: var(--space-5);
  text-align: center;
}

.signup {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

label {
  font-size: var(--step--1);
  font-weight: 500;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

input {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
}

input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-error,
.form-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--step--1);
}

.form-error {
  text-align: center;
}

/* Off-screen rather than display: none, which some bots skip. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile shows a widget here only when it needs the visitor to click. */
.turnstile {
  display: flex;
  justify-content: center;
}

.turnstile:empty {
  display: none;
}

.done {
  padding: var(--space-4) 0;
  text-align: center;
}

.done:focus {
  outline: none;
}

.done-title {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

.done-detail {
  margin: var(--space-2) 0 0;
  font-size: var(--step-1);
}

.done-mark {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--done);
  stroke-width: 2.5;
  stroke-linecap: square;
}

/* The ridgeline along the bottom */

.ridge {
  display: block;
  flex: none;
  width: 100%;
  height: var(--ridge-height);
}

.ridge-shade {
  fill: var(--ridge-shade);
}

.ridge-lit {
  fill: var(--ridge-lit);
}

/* About, privacy and 404 pages */

.page-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) 0;
}

.page-head a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: none;
}

.page-head img {
  width: 2.25rem;
  height: 2.25rem;
}

.prose {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-12);
}

.prose h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
}

.prose h2 {
  margin: var(--space-8) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
}

.prose p,
.prose li {
  max-width: 68ch;
}

.prose ul {
  padding-left: var(--space-5);
}

/*
 * Wide screens: the same composition as the share and LinkedIn images. Slogan left, goat and
 * name right, and the button and notes centered underneath. Narrower screens keep the stack.
 */
@media (min-width: 900px) {
  :root {
    --logo: var(--logo-wide);
    --step-name: var(--step-name-wide);
  }

  .stage {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: var(--space-16);
    align-content: center;
    justify-content: center;
  }

  .slogan {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: var(--step-slogan-wide);
    text-align: left;
  }

  /* Center the goat itself on the slogan: the negative bottom margin takes the name's height
     out of the centering, so the name hangs below instead of pushing the goat up. */
  .brand {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    /* Measured: the slogan's ink sits a little below its line box's center, more so as it
       grows. This top margin moves the goat down by half as much, onto the ink's center. */
    margin-top: calc(var(--step-slogan-wide) * 0.08);
    margin-bottom: calc(var(--logo) * 0.06 - var(--step-name));
  }

  .cta,
  .offer,
  .note {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* Add back the name's height so the gap from the name to the button stays the same. */
  .cta {
    margin-top: calc(var(--space-14) + var(--step-name) - var(--logo) * 0.06);
  }
}

@media (max-width: 600px) {
  /* A shorter ridge shows more, smaller peaks instead of a few blown-up facets. */
  :root {
    --ridge-height: 60px;
  }

  .stage {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
  }

  .cta,
  .button-large {
    width: 100%;
  }

  .button-large {
    min-width: 0;
    max-width: 22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .dialog[open] {
    animation: none;
  }

  .button::before {
    transition: none;
  }
}