/* ============================================================
   YIGOOR — design system
   Near-black canvas, signal red, editorial serif display type.
   ============================================================ */

:root {
  /* color */
  --bg: #08080a;
  --bg-elev: #0e0e12;
  --surface: #121217;
  --surface-2: #17171d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f7f5f2;
  --muted: #a2a0a8;
  --faint: #8a8792;
  --red: #f0433a;
  --red-deep: #c2271f;
  --red-glow: rgba(240, 67, 58, 0.35);

  /* Theme-dependent surfaces. These exist because the raw values they replace
     (white at low alpha, near-black fills) only make sense on a dark canvas. */
  --input-bg: rgba(8, 8, 10, 0.6);      /* form fields */
  --hover-tint: rgba(255, 255, 255, 0.04);
  --placeholder-ink: rgba(255, 255, 255, 0.34); /* initials on empty artwork */
  --feat-base: #0c0c11;                 /* billboard behind the gradient */
  --shadow-pop: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --red-ink: var(--red);                /* red used as text, not as a fill */
  --ok-ink: #7fe3a8;
  --status-ok: #58c98a;
  --status-warn: #d6a24a;
  --status-bad: #e0685f;

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", monospace;

  /* rhythm */
  --section: clamp(5rem, 10vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 5px;
  --radius-sm: 5px;
  --radius-pill: 5px;

  --container: 78rem;

  color-scheme: dark;
}

/* ---------- light theme ----------
   Applied when the root carries data-theme="light". nojs.js resolves the theme
   before first paint from the saved choice, falling back to the OS preference,
   so there is no flash of the wrong palette. With JavaScript off no attribute is
   set and the dark palette above stands, which is the brand default and fully
   readable, just not preference-aware.

   Paper rather than pure white, and warm to match the off-white used for text on
   the dark side. Red stays the brand red as a fill, but text-weight red darkens
   to --red-deep, because #f0433a on paper is too low contrast to read. */
:root[data-theme="light"] {
  --bg: #faf9f7;
  --bg-elev: #ffffff;
  --surface: #f3f1ee;
  --surface-2: #e9e6e1;
  --line: rgba(24, 21, 26, 0.10);
  --line-strong: rgba(24, 21, 26, 0.20);
  --text: #17151a;
  --muted: #56535d;
  --faint: #6f6c76;

  --input-bg: #ffffff;
  --hover-tint: rgba(24, 21, 26, 0.05);
  --placeholder-ink: rgba(24, 21, 26, 0.32);
  --feat-base: #e9e6e1;
  --shadow-pop: 0 18px 40px -22px rgba(24, 21, 26, 0.35);
  --red-ink: var(--red-deep);
  --ok-ink: #12794a;
  /* The dark-canvas status colours drop to ~2:1 on paper. */
  --status-ok: #12794a;
  --status-warn: #8a5a00;
  --status-bad: #b3261e;

  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The hidden attribute must always win. Without this, any element that also
   carries a display rule (grid overlays, flex strips) renders despite being
   hidden — a bug this codebase has now hit twice (preview overlay, upload
   confirm). JS toggles el.hidden everywhere, so this is load-bearing. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }

/* ---------- typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7.5vw, 5.75rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 500; }
.accent-i { font-style: italic; color: var(--red-ink); font-weight: 420; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.kicker::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}

.lede {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--muted);
  max-width: 44rem;
  text-wrap: pretty;
}

/* ---------- layout ---------- */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.section { padding-block: var(--section); position: relative; }
.section-head { display: grid; gap: 1.1rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; letter-spacing: 0.01em; font-size: 1.15rem; }
.brand img { width: 34px; height: 34px; border-radius: var(--radius); }
.nav-links { display: flex; gap: 1.9rem; align-items: center; list-style: none; padding: 0; }
.nav-links a {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.25s ease;
  position: relative;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.nav-cta { display: flex; align-items: center; gap: 0.9rem; }

/* mobile nav */
.menu-btn {
  display: none;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  width: 42px; height: 42px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn svg { width: 20px; height: 20px; }
.mobile-menu {
  display: none;
  position: fixed;
  inset: 4.5rem 0 auto 0;
  z-index: 99;
  background: rgba(8, 8, 10, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem var(--gutter) 2rem;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 0.8rem 0;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.mobile-menu a:last-child { border-bottom: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-cta .btn { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.93rem;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: var(--red-deep); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); background: var(--hover-tint); }
.btn-light { background: var(--text); color: #0a0a0c; }
.btn-light:hover { transform: translateY(-1px); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.08) translateY(-1.5%); }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(8, 8, 10, 0.96) 0%, rgba(8, 8, 10, 0.45) 38%, rgba(8, 8, 10, 0.35) 100%),
    radial-gradient(90% 60% at 50% 100%, rgba(240, 67, 58, 0.14), transparent 65%);
}
.hero-halftone {
  position: absolute;
  right: -8%;
  top: 6%;
  width: min(52vw, 620px);
  opacity: 0.16;
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-3%) rotate(1.2deg); }
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(4rem, 9vh, 7rem);
  display: grid;
  gap: 1.6rem;
  justify-items: center;
  text-align: center;
}
.hero-content .lede { margin-inline: auto; }
.hero h1 { max-width: 17ch; }

.scroll-hint {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--text), transparent);
  opacity: 0.5;
  animation: hint 2.2s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: scaleY(0.5); transform-origin: top; opacity: 0.2; }
  50% { transform: scaleY(1); opacity: 0.6; }
}

/* ---------- waitlist form ---------- */
.waitlist-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(14, 14, 18, 0.6);
  backdrop-filter: blur(14px);
  max-width: 30rem;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.waitlist-form:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(240, 67, 58, 0.15);
}
.waitlist-form input[type="email"] {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: 0.98rem;
}
.waitlist-form input::placeholder { color: var(--faint); }
.waitlist-success {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(88, 214, 141, 0.35);
  background: rgba(88, 214, 141, 0.08);
  color: #7fe3a8;
  font-weight: 500;
}
.field-error { color: var(--red-ink); font-size: 0.85rem; margin-top: 0.4rem; }

/* ---------- marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  overflow: hidden;
  user-select: none;
  background: var(--bg-elev);
}
.marquee-track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 3.2rem;
  white-space: nowrap;
}
.marquee span::after { content: "●"; font-size: 0.45rem; color: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- value props ---------- */
.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.prop {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.1rem 1.9rem;
  background: linear-gradient(170deg, var(--surface), var(--bg-elev));
  display: grid;
  gap: 0.9rem;
  align-content: start;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.prop:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.prop-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--red);
  letter-spacing: 0.2em;
}
.prop p { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 860px) { .props { grid-template-columns: 1fr; } }

/* ---------- category cards ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
}
.cat-card {
  --accent: var(--red);
  grid-column: span 2;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  min-height: 15rem;
  display: flex;
  align-items: flex-end;
  padding: 1.7rem;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease;
}
.cat-grid .cat-card:nth-child(1),
.cat-grid .cat-card:nth-child(2) { grid-column: span 3; min-height: 19rem; }
.cat-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.cat-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    linear-gradient(170deg, var(--surface-2), var(--bg-elev));
  transition: opacity 0.35s ease;
}
.cat-card-img {
  position: absolute; inset: 0; z-index: -2;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0.5;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}
.cat-card:hover .cat-card-img { transform: scale(1.05); opacity: 0.65; }
.cat-card-body { display: grid; gap: 0.35rem; z-index: 1; }
.cat-card h3 { font-size: 1.5rem; }
.cat-card p { color: var(--muted); font-size: 0.92rem; }
.badge {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(8px);
  color: var(--muted);
}
.badge.live { color: #7fe3a8; border-color: rgba(88, 214, 141, 0.4); }
@media (max-width: 860px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-grid .cat-card, .cat-grid .cat-card:nth-child(-n + 2) { grid-column: span 1; min-height: 13rem; }
}

/* ---------- sneak peeks ---------- */
.peeks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(16rem, 30vw, 24rem);
  gap: 1.2rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.peek {
  scroll-snap-align: start;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.peek:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.peek-thumb { aspect-ratio: 16 / 9; background: var(--surface-2); position: relative; overflow: hidden; }
.peek-thumb img { width: 100%; height: 100%; object-fit: cover; }
.peek-thumb .play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.55), transparent 55%);
}
.peek-thumb .play svg {
  width: 46px; height: 46px;
  opacity: 0.9;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}
.peek:hover .play svg { transform: scale(1.12); }
.peek-body { padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: 0.2rem; }
.peek-body strong { font-weight: 560; }
.peek-body span { color: var(--faint); font-size: 0.85rem; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: stretch; }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(175deg, var(--surface), var(--bg-elev));
  padding: 1.9rem 1.7rem;
  display: grid;
  gap: 1.15rem;
  align-content: start;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.plan.popular { border-color: color-mix(in srgb, var(--red) 55%, transparent); box-shadow: 0 18px 44px -22px var(--red-glow); }
.plan-name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.plan-price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 480; line-height: 1; }
.plan-price small { font-family: var(--font-body); font-size: 0.85rem; color: var(--faint); font-weight: 400; margin-left: 0.3rem; }
.plan-desc { color: var(--muted); font-size: 0.92rem; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.plan li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.92rem; color: var(--muted); }
.plan li::before { content: "—"; color: var(--red); flex-shrink: 0; }
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: 0.7rem; max-width: 50rem; margin-inline: auto; }
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq[open] { border-color: var(--line-strong); background: var(--surface); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-weight: 540;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--red);
  font-size: 1.2rem;
  transition: rotate 0.3s ease;
  flex-shrink: 0;
}
.faq[open] summary::after { rotate: 45deg; }
.faq-answer { padding: 0 1.5rem 1.4rem; color: var(--muted); font-size: 0.97rem; max-width: 60ch; }

/* ---------- creator CTA band ---------- */
.cta-band {
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.8rem, 5vw, 4.5rem);
  background:
    radial-gradient(110% 130% at 90% 10%, rgba(240, 67, 58, 0.55), transparent 55%),
    linear-gradient(160deg, #1a0c0b, #0d0a0f 70%);
  border: 1px solid rgba(240, 67, 58, 0.28);
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}
.cta-band .halftone-bg {
  position: absolute;
  right: -6%;
  bottom: -22%;
  width: min(44%, 420px);
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta-band h2 { max-width: 16ch; }
.cta-band p { color: var(--muted); max-width: 40rem; }
.cta-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- forms (contact / apply) ---------- */
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(175deg, var(--surface), var(--bg-elev));
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: grid;
  gap: 1.3rem;
}
.form-grid { display: grid; gap: 1.3rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.form-section-first { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section h4 { font-size: .95rem; font-weight: 650; margin: 0 0 .25rem; display: flex; align-items: center; gap: .6rem; }
.form-step {
  width: 1.5rem; height: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  display: grid; place-items: center; font-size: .78rem; font-weight: 500; color: var(--faint);
}
.form-section .form-hint, .form-actions .form-hint { color: var(--muted); font-size: .88rem; margin: 0; }
.form-section .field-error { display: block; }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.label-opt { color: var(--faint); font-weight: 400; }

/* Become a creator: the aside is short, so it stays in view beside the long form. */
.apply-page { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: 3.5rem; }
.apply-aside { position: sticky; top: 5.5rem; }
@media (max-width: 860px) { .apply-aside { position: static; } }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.45rem; align-content: start; }
.field label { font-size: 0.85rem; font-weight: 550; color: var(--muted); letter-spacing: 0.02em; }
.field input, .field textarea, .field select {
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  min-height: 44px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
}
/* Text inputs and selects share one exact height, so a pair on the same row
   lines up; the select gets our own chevron instead of the platform's. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.3;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(240, 67, 58, 0.12);
}
.form-success {
  border: 1px solid rgba(88, 214, 141, 0.35);
  background: rgba(88, 214, 141, 0.07);
  color: var(--ok-ink);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
}

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  padding-top: clamp(9rem, 18vh, 12rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  display: grid;
  gap: 1.3rem;
}
.page-hero .halftone-corner {
  position: absolute;
  top: 0; right: -10%;
  width: min(40vw, 460px);
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* ---------- stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stat { border-left: 1px solid var(--line-strong); padding-left: 1.4rem; display: grid; gap: 0.15rem; }
.stat b { font-family: var(--font-display); font-size: 2.2rem; font-weight: 480; }
.stat span { color: var(--faint); font-size: 0.85rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } }

/* ---------- prose (legal/about) ---------- */
.prose { max-width: 46rem; display: grid; gap: 1.2rem; color: var(--muted); }
.prose h2 { font-size: 1.6rem; color: var(--text); margin-top: 1.4rem; }
.prose strong { color: var(--text); }
.prose ul { display: grid; gap: 0.5rem; padding-left: 1.15rem; }
.prose li { line-height: 1.6; }
.prose li::marker { color: var(--faint); }

/* ---------- legal documents ---------- */
/* Top spacing is set by .shell-main .legal-head in app.css, which has to win
   over .shell-main .container zeroing all container padding. */
.legal-head { display: grid; gap: 0.5rem; }
.legal-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.legal-date { color: var(--faint); font-size: 0.95rem; }
.legal-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.legal-switch a {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.legal-switch a:hover { color: var(--text); border-color: var(--faint); }
.legal-switch a.current { background: var(--bg-elev); color: var(--text); border-color: var(--faint); }

.legal-body {
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 6rem;
  border-left: 1px solid var(--line);
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
  /* A long document scrolls; the contents list should scroll with it, not past it. */
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}
.legal-toc h2 { font-size: 0.95rem; color: var(--text); }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.legal-toc a { color: var(--faint); font-size: 0.88rem; line-height: 1.45; display: block; }
.legal-toc a:hover { color: var(--text); }
.legal-prose { max-width: 44rem; }
.legal-prose h2 { scroll-margin-top: 5.5rem; }

@media (max-width: 900px) {
  .legal-body { grid-template-columns: 1fr; gap: 2rem; }
  .legal-toc { position: static; max-height: none; }
}

/* ---------- information pages (about, FAQs) ---------- */
.info-page { padding-top: 1.5rem; display: grid; gap: 2.6rem; max-width: 52rem; }
.info-section { display: grid; gap: 0.9rem; }
.info-section > h2, .faq-section > h2 { font-size: 1.35rem; }
.faq-section { display: grid; gap: 1rem; }
.faq-list { margin-inline: 0; max-width: none; }

.info-note {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.info-note b { display: block; margin-bottom: 0.25rem; }
.info-note p { color: var(--muted); font-size: 0.94rem; margin: 0; max-width: 46ch; }

/* ---------- contact / apply ---------- */
.contact-page {
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 3rem;
  align-items: start;
}
.contact-aside { display: grid; gap: 1.6rem; align-content: start; }
.contact-block { display: grid; gap: 0.35rem; }
.contact-block > b { font-size: 0.9rem; color: var(--faint); font-weight: 550; }
.contact-block a { color: var(--text); }
.contact-block a:hover { color: var(--red-ink); }
.contact-block p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.contact-block p a { color: var(--red-ink); }

.steps { list-style: none; display: grid; gap: 1rem; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  gap: 0.2rem;
  padding-left: 2.2rem;
  position: relative;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  color: var(--faint);
}
.steps span { color: var(--muted); font-size: 0.94rem; }

@media (max-width: 860px) {
  .contact-page { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ---------- footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--section);
  background:
    radial-gradient(70% 120% at 50% 130%, rgba(240, 67, 58, 0.1), transparent 60%),
    var(--bg-elev);
}
.footer-inner {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
}
.footer-brand { display: grid; gap: 1rem; align-content: start; }
.footer-brand p { color: var(--faint); font-size: 0.92rem; max-width: 24rem; }
.footer-col { display: grid; gap: 0.7rem; align-content: start; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.footer-col a { color: var(--muted); font-size: 0.95rem; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 0.85rem;
}
.socials { display: flex; gap: 0.7rem; }
.socials a {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.socials a:hover { border-color: var(--red); color: var(--text); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } }

/* Reveal-on-scroll used to hide these blocks until an observer in the old marketing
   bundle revealed them. That script is not loaded in the platform shell, so the rules
   left real content permanently invisible. The classes are gone from the templates and
   the hiding rules with them; a page must never depend on JavaScript to be readable. */

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  bottom: 1.8rem; right: 1.8rem;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(14, 14, 18, 0.7);
  backdrop-filter: blur(12px);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition: opacity 0.35s ease, translate 0.35s ease, border-color 0.25s ease, color 0.25s ease;
}
.to-top.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { border-color: var(--red); color: var(--text); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- honeypot ---------- */
input[name="website"] { position: absolute !important; left: -9999px !important; }

/* ---------- utility ---------- */
.mono-note { font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); letter-spacing: 0.08em; }
.divider { border: none; border-top: 1px solid var(--line); margin: 0; }
.center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html.js .reveal:not(.in), html.js .reveal-stagger:not(.in) > * { opacity: 1; transform: none; }
}