/* Inter, self-hosted (variable, latin subset) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-var.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;
}

/* vibemasters.ai — page layer over the brand stylesheet (styles.css).
   Every color/space/radius/shadow comes from the brand tokens; this file
   only arranges the landing page and adds the monospace stack for the
   brand's terminal-flavored labels. */

:root {
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
[hidden] { display: none !important; }

/* — layout shell (spec 04: 760px column, left-aligned) — */
.shell { max-width: 760px; margin-inline: auto; padding-inline: 20px; }

/* — utilities — */
.mono { font-family: var(--font-mono); }
.dim { color: var(--color-neutral-500); }
.micro {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-500);
}

/* Freestanding rules fade at their ends — reuse .hr, flush to its context. */
.rule { margin: 0; }

/* — nav — */
.nav { padding: var(--space-6) 0 var(--space-4); }
.nav-brand { letter-spacing: -0.04em; }
.brand-min { display: none; }

/* — hero — */
.hero {
  position: relative;
  padding-top: 72px; padding-bottom: 56px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.kicker {
  font-size: 11px; letter-spacing: 0.24em;
  color: var(--color-neutral-500); margin: 0;
}
.hero h1 {
  font-size: clamp(44px, 10vw, 58px);
  line-height: 0.94; letter-spacing: -0.04em; margin: 0;
}
.lede {
  font-size: 18px; line-height: 1.5; margin: 0;
  color: var(--color-neutral-400); max-width: 40ch;
}
.offer {
  font-size: 14px; line-height: 1.55; margin: 0;
  color: var(--color-neutral-500); max-width: 46ch;
}

/* — opt-in — */
.optin { display: flex; flex-direction: column; gap: var(--space-3); max-width: 460px; }
.optin-row { display: flex; gap: var(--space-3); }
.optin-row .input { flex: 1; min-width: 0; min-height: 44px; font-family: var(--font-mono); font-size: 13px; }
.optin-row .btn {
  flex: none; min-height: 44px; padding-inline: var(--space-6);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent);
}
.optin-row .btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.optin-row .btn:active { background: var(--color-accent-400); border-color: var(--color-accent-400); }
.note { margin: 0; }
.err { margin: 0; color: var(--color-accent-300); }
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); opacity: 0; pointer-events: none;
}

.thanks { display: flex; flex-direction: column; gap: var(--space-3); max-width: 46ch; }
.thanks-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 25px; letter-spacing: -0.04em; margin: 0;
}
.thanks-body { font-size: 15px; color: var(--color-neutral-400); margin: 0; }

/* — proof band: the one saturated full-bleed field (--color-section) — */
.band {
  background: radial-gradient(140% 220% at 88% -20%,
    var(--color-section-glow), var(--color-section) 58%);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-8);
}
.band-inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.band-kicker { color: var(--color-neutral-400); }
.band .tag { font-size: 11px; padding: 4px 12px; }

/* — the ladder — */
.ladder { padding-top: 56px; display: flex; flex-direction: column; gap: var(--space-6); }
.ladder h2 { font-size: clamp(28px, 5vw, 32px); line-height: 0.94; letter-spacing: -0.04em; margin: 0; }
.rungs { display: flex; flex-direction: column; gap: var(--space-4); }
.rungs .card { padding: var(--space-8); gap: var(--space-4); border-radius: var(--radius-lg); }
.rungs .card-title { font-size: 20px; letter-spacing: -0.04em; line-height: 0.94; }
.rungs .card-body { font-size: 14px; line-height: 1.55; opacity: 1; color: var(--color-neutral-400); }
.rung-head { display: flex; align-items: center; justify-content: space-between; }
.rung-head .micro { letter-spacing: 0.2em; }
.rung-apply { align-self: flex-start; font-family: var(--font-mono); font-weight: 400; border-radius: 999px; }
/* near-black panel gradient (brand spec: #17171b → #101013) */
.card-snipers {
  background: linear-gradient(160deg, #17171b, #101013);
}

/* — footer — */
.foot { margin-top: 64px; padding-bottom: 48px; }
.foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-6);
}
.term { font-size: 13px; color: var(--color-text); }
.cursor {
  display: inline-block; width: 8px; height: 15px; margin-left: 6px;
  background: var(--color-accent); vertical-align: text-bottom;
  animation: blink 1.06s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* — mobile (spec 09) — */
@media (max-width: 520px) {
  .shell { padding-inline: 18px; }
  .brand-full { display: none; }
  .brand-min { display: inline; }
  .nav { padding-top: var(--space-4); }
  .hero { padding-top: 48px; padding-bottom: 40px; gap: var(--space-4); }
  .lede { font-size: 16px; }
  .optin-row { flex-direction: column; }
  .optin-row .btn { width: 100%; min-height: 48px; }
  .band { padding-block: var(--space-6); }
  .band-inner { gap: var(--space-3); }
  .ladder { padding-top: 40px; }
  .rungs .card { padding: var(--space-6); }
  .rungs .card-title { font-size: 19px; }
  .foot { margin-top: 48px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* — funnel pages (101 / apply / snipers) — */
.nav-home { color: inherit; text-decoration: none; }
.nav-home:hover { color: var(--color-text); }
.points { display: flex; flex-direction: column; gap: var(--space-2); }
.point { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); display: flex; gap: var(--space-3); }
.arrow { letter-spacing: 0; }

.modules { display: flex; flex-direction: column; gap: var(--space-3); }
.module {
  display: flex; align-items: flex-start; gap: var(--space-6);
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-8);
}
.module > .micro { padding-top: 4px; letter-spacing: 0.2em; }
.module > div { flex: 1; }
.module-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 var(--space-1);
}
.module-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-400); }
.module .tag { flex: none; margin-top: 2px; }

.apply-form { display: flex; flex-direction: column; gap: var(--space-6); max-width: 560px; }
.field-row { display: flex; flex-direction: column; gap: var(--space-2); }
.field-row label { letter-spacing: 0.14em; }
textarea.input { min-height: 96px; resize: vertical; font-family: var(--font-body); }
select.input { appearance: none; -webkit-appearance: none; min-height: 44px; }
.apply-form .input { min-height: 44px; }
.btn-submit { align-self: flex-start; min-height: 46px; padding-inline: var(--space-8); font-size: 14px; font-weight: 700;
  background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-submit:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn-submit:active { background: var(--color-accent-400); border-color: var(--color-accent-400); }