/* ───────────────────────────────────────────────────────────────────────────
   Gildhause landing page.

   Deliberately hand-written CSS with no build step and no framework. The app
   (app.gildhause.com) is Vue + Tailwind; this is four static files. A marketing
   page that needs a toolchain is a marketing page that rots, and this one has to
   survive being edited in a hurry by whoever is nearest.

   Tokens are copied from frontend/src/style.css rather than imported, because
   this deploys as a separate service with no access to that build. They are
   checked against it by a test (WwwBrandTokenTests) so the copy cannot drift
   silently — the whole point of a shared design system is defeated the moment
   the two halves disagree about what brass is.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surface elevation ramp */
  --surface-base: #0E141A;
  --surface-panel: #141B22;
  --surface-card: #19212A;
  --surface-raised: #222C36;

  /* Text on dark */
  --text-primary: #E6EDF2;
  --text-body: #C7D2DA;
  --text-muted: #97A8B5;
  --text-faint: #6B8A99;

  /* Machine layer — Teal */
  --teal-400: #5FEDD8;
  --teal-500: #40E0D0;

  /* Team layer — Brass */
  --brass-300: #E8C766;
  --brass-500: #E0B24A;

  --orange-600: #FF6B35;
  --done: #2BB673;

  --font-display: 'Sora', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-control: 9px;
  --radius-card: 14px;
  --radius-pill: 9999px;

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --glow-teal-sm: 0 0 10px rgba(64, 224, 208, 0.4);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A single soft light source behind the hero. One gradient, not a light show —
   the product is a ledger, and the page should feel like one. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(64, 224, 208, 0.10), transparent 70%),
    radial-gradient(700px 400px at 85% 5%, rgba(224, 178, 74, 0.06), transparent 70%);
  z-index: 0;
}

main, .nav, .footer { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); margin: 0; }

a { color: var(--teal-400); text-decoration: none; }
a:hover { text-decoration: underline; }

.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;
}

/* ─── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1080px; margin: 0 auto; padding: 22px 24px;
}

/* The mark sits beside the name rather than replacing it. The name is the thing a
   stranger has to remember; the mark is what they recognise second time. */
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark img { display: block; flex: none; }
.wordmark.small { font-size: 16px; gap: 9px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--text-muted); font-size: 15px; }
.nav-links a:hover { color: var(--text-primary); text-decoration: none; }

.nav-cta {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  color: var(--text-primary) !important;
}
.nav-cta:hover { border-color: var(--teal-500); box-shadow: var(--glow-teal-sm); }

/* ─── Hero ─────────────────────────────────────────────────────────────── */

.hero { max-width: 820px; margin: 0 auto; padding: 84px 24px 72px; text-align: center; }

.eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--brass-500); margin: 0 0 22px;
}

.hero h1 {
  font-size: clamp(42px, 7vw, 68px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 26px;
}
/* Solid, not a gradient.
   The teal-to-brass ramp ran the middle of the word through the olive midpoint
   between #5FEDD8 and #E8C766 — the two brand accents are near-complementary, so
   everything between them is mud, and it landed on the single largest piece of
   type on the site. Two solid brand colours against each other do the same job
   (the headline turns, the eye lands) without inventing a colour that is not in
   the system. */
.accent { color: var(--teal-400); }

/* The sub-line carries the scope qualifier — which practice is actually live.
   Deliberately quieter than the lede and deliberately present: the claim above it
   is firm-wide, and a firm-wide claim with one practice behind it needs the
   qualifier in the same breath, not three sections later. */
.lede-sub {
  font-size: 16px; color: var(--text-faint);
  max-width: 560px; margin: -22px auto 38px;
}

.lede { font-size: 19px; color: var(--text-muted); max-width: 620px; margin: 0 auto 38px; }

/* ─── Waitlist form ────────────────────────────────────────────────────── */

.waitlist {
  display: flex; gap: 10px; justify-content: center;
  max-width: 520px; margin: 0 auto 14px; flex-wrap: wrap;
}

.waitlist input {
  flex: 1 1 260px;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: 16px;
  padding: 13px 16px;
}
.waitlist input::placeholder { color: var(--text-faint); }
.waitlist input:focus {
  outline: none; border-color: var(--teal-500); box-shadow: var(--glow-teal-sm);
}
.waitlist input[aria-invalid='true'] { border-color: var(--orange-600); }

.waitlist button {
  background: var(--teal-500); color: #06231F;
  border: none; border-radius: var(--radius-control);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 13px 22px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.waitlist button:hover { box-shadow: var(--glow-teal-sm); transform: translateY(-1px); }
.waitlist button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.form-note { font-size: 14px; color: var(--text-faint); margin: 0; text-align: center; }
.form-note.ok { color: var(--done); }
.form-note.err { color: var(--orange-600); }

/* ─── Sections ─────────────────────────────────────────────────────────── */

.section { max-width: 1000px; margin: 0 auto; padding: 72px 24px; }
.section.alt {
  max-width: none;
  background: var(--surface-panel);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.section.alt > * { max-width: 1000px; margin-left: auto; margin-right: auto; }

.section h2 {
  font-size: clamp(28px, 4vw, 38px); font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 14px;
}
.section-lede { color: var(--text-muted); max-width: 640px; margin: 0 0 40px; }

.close { text-align: center; }
.close .section-lede { margin-left: auto; margin-right: auto; }

/* ─── Cards ────────────────────────────────────────────────────────────── */

.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: 17px; font-weight: 600; margin: 12px 0 8px; }
.card p { margin: 0; font-size: 15px; color: var(--text-muted); }
.card-muted { background: transparent; box-shadow: none; border-style: dashed; }

.pip { display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-pill); }
.pip-live { background: var(--teal-500); box-shadow: var(--glow-teal-sm); }
.pip-soon { background: var(--text-faint); }

.footnote {
  margin: 34px 0 0; font-size: 15px; color: var(--text-faint);
  border-left: 2px solid var(--brass-700, var(--brass-500));
  padding-left: 16px; max-width: 640px;
}

/* ─── Numbered rows ────────────────────────────────────────────────────── */

.rows { display: flex; flex-direction: column; gap: 34px; }
.row { display: flex; gap: 22px; align-items: flex-start; }
.row-num {
  font-family: var(--font-mono); font-size: 14px; color: var(--brass-500);
  padding-top: 4px; min-width: 32px;
}
.row h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.row p { margin: 0; color: var(--text-muted); max-width: 720px; }

/* ─── Split list ───────────────────────────────────────────────────────── */

.split { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.split h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.yes { color: var(--teal-400); }
.no { color: var(--text-muted); }

.list { margin: 0; padding-left: 20px; }
.list li { margin-bottom: 10px; color: var(--text-muted); font-size: 15px; }

/* ─── Footer ───────────────────────────────────────────────────────────── */

.footer {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
  max-width: 1000px; margin: 0 auto; padding: 40px 24px 56px;
  border-top: 1px solid var(--border-hairline);
}
/* The endorsement lockup: mark + Gildhause, then a brass rule, then the parent
   company. Indented to the wordmark's text so the rule reads as attached to the
   name rather than floating under the mark. Xzkander is deliberately quieter
   than Gildhause and deliberately present — the footer is where a stranger
   deciding whether to trust this goes looking for who is behind it. */
.footer-brand .wordmark.small { margin-bottom: 2px; }
.footer-note {
  margin: 8px 0 0 35px; padding-left: 12px;
  border-left: 2px solid var(--brass-500);
  font-size: 14px; color: var(--text-faint);
}
.footer-links { display: flex; gap: 22px; font-size: 14px; }
.footer-links a { color: var(--text-muted); }

@media (max-width: 640px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .hero { padding-top: 56px; }
  .row { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .waitlist button { transition: none; }
}

/* The scope box. Constraints read as a design stance to a technical buyer; unbounded
   capability reads as a promise they expect to be broken. */
.scope {
  border-left: 2px solid var(--teal-500);
  padding: 2px 0 2px 16px;
  margin: 0 0 32px;
  color: var(--text-body);
  max-width: 640px;
}

/* ─── The verdict artefact ───────────────────────────────────────────────
   The page's centrepiece, because it is the one thing a competitor cannot
   screenshot from their own product: a structured, blocking review of real
   work. Styled as an artefact rather than a marketing panel — chrome bar,
   monospace, rubric rows — so it reads as something the system produced
   rather than something a designer drew. */
.verdict {
  max-width: 760px; margin: 0 auto;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.85);
}

.verdict-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-hairline);
}
.verdict-bar .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong); flex: none;
}
.verdict-title {
  margin-left: 8px; font-family: var(--font-mono);
  font-size: 13px; color: var(--text-muted);
}
.badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.badge-fail { background: rgba(224,122,74,.14); color: #E8A06A; border: 1px solid rgba(224,122,74,.3); }

.verdict-body { padding: 8px 0 18px; }

.vrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px 20px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 15px; color: var(--text-body);
}
.vrow:last-of-type { border-bottom: 0; }
.vsec { color: var(--text-body); }
.vp, .vf { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; }
.vp { color: var(--text-faint); }
.vf { color: #E8A06A; font-weight: 500; }

.finding {
  margin: 14px 20px 0; padding: 16px 18px;
  background: var(--surface-base);
  border: 1px solid rgba(224,122,74,.22);
  border-left: 3px solid #E07A4A;
  border-radius: var(--radius-control);
}
.finding-tag {
  display: inline-block; margin-bottom: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: #E8A06A;
}
.finding p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.finding-note {
  margin-top: 10px !important; padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
  font-size: 14px !important; color: var(--text-muted) !important;
}
.finding-note strong { color: var(--text-primary); }

/* ─── Rank ladder ─────────────────────────────────────────────────────── */
.ladder {
  list-style: none; margin: 8px auto 0; padding: 0; max-width: 760px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
}
.ladder li {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
  font-family: var(--font-mono); font-size: 13.5px; color: var(--text-muted);
  white-space: nowrap;
}
.ladder li + li::before {
  content: ""; flex: 1 1 18px; height: 1px; margin-right: 10px;
  background: linear-gradient(90deg, var(--border-hairline), var(--border-strong));
}
.ladder-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--teal-500); opacity: .35;
}
.ladder li:nth-child(2) .ladder-dot { opacity: .5; }
.ladder li:nth-child(3) .ladder-dot { opacity: .65; }
.ladder li:nth-child(4) .ladder-dot { opacity: .82; }
.ladder li:last-child .ladder-dot { opacity: 1; box-shadow: 0 0 12px var(--teal-500); }
.ladder li:last-child { color: var(--text-primary); }

/* ─── Scroll reveal ───────────────────────────────────────────────────────
   Added by waitlist.js via IntersectionObserver — a same-origin script, so it
   satisfies script-src 'self'. Elements are visible by default and only become
   animatable once the script marks them, so the page is fully readable with
   JavaScript disabled rather than blank. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .ladder li + li::before { display: none; }
  .ladder { gap: 12px 18px; }
  .ladder li { flex: 0 0 auto; }
  .vrow { font-size: 14px; padding: 10px 16px; }
}