/* WirePitch — editorial, near-black, one copper accent. No decoration that lies. */

:root {
  --ink: #0e0e10;
  --ink-2: #16161a;
  --bone: #ece9e2;
  --bone-dim: #a8a49b;
  --copper: #c47b4e;
  --copper-bright: #dd9463;
  --rule: #2a2a30;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* masthead */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.4rem clamp(1.2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-family: var(--mono); font-size: 1rem; letter-spacing: 0.22em;
  color: var(--bone); text-decoration: none;
}
.wordmark span { color: var(--copper); }
.masthead nav { display: flex; gap: 1.6rem; }
.masthead nav a {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--bone-dim); text-decoration: none; text-transform: uppercase;
}
.masthead nav a:hover { color: var(--bone); }
.masthead .nav-cta { color: var(--copper); }
.masthead .nav-cta:hover { color: var(--copper-bright); }

main { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 4rem); }

/* hero */
.hero { padding: clamp(3rem, 9vh, 6rem) 0 4rem; }
.kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 1.4rem;
}
h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12;
  letter-spacing: -0.01em; margin-bottom: 2.6rem; max-width: 54rem;
}
.lede { max-width: 40rem; color: var(--bone-dim); margin-bottom: 1.2rem; }
.interstitial { min-height: 55vh; }
.interstitial .buy { display: inline-block; margin-top: 1.6rem; max-width: 16rem; }

/* mad-libs form */
.madlibs { max-width: 56rem; }
.madlibs-sentence {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 2.1; color: var(--bone-dim);
}
.slot {
  font-family: var(--serif); font-size: inherit; color: var(--copper-bright);
  background: transparent; border: 0; border-bottom: 1px solid var(--copper);
  padding: 0 0.15em; outline: none; min-width: 8ch;
  /* the sentence auto-sizes each slot to its content in ch; clamp it so a long
     qualifying criterion cannot push the page wider than the viewport */
  max-width: 100%; box-sizing: border-box;
}
.slot:focus { border-bottom-color: var(--copper-bright); background: var(--ink-2); }
.slot::placeholder { color: #6d5a4c; font-style: italic; }
.slot-select { appearance: none; cursor: pointer; width: 9ch; }
.slot-select option { background: var(--ink-2); color: var(--bone); font-family: var(--sans); }
.slot-wide { min-width: 22ch; }
.slot-error {
  display: inline-block; font-family: var(--mono); font-style: normal;
  font-size: 0.72rem; color: #d06a5a; margin-left: 0.5rem;
}
.contact-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.contact-row input {
  flex: 1 1 14rem; font-family: var(--sans); font-size: 0.95rem;
  color: var(--bone); background: var(--ink-2);
  border: 1px solid var(--rule); padding: 0.85rem 1rem;
}
.contact-row input:focus { border-color: var(--copper); outline: none; }
.contact-row .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.contact-row button, .buy {
  flex: 0 0 auto; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); background: var(--copper);
  border: 0; padding: 0.95rem 1.8rem;
}
.contact-row button:hover, .buy:hover { background: var(--copper-bright); }
.fine-print {
  margin-top: 1.4rem; font-size: 0.85rem; color: var(--bone-dim); max-width: 44rem;
}

/* live estimate counter */
.est-counter {
  font-family: var(--mono); font-size: 1.05rem; color: var(--copper-bright);
  margin-top: 1.2rem; min-height: 1.4rem;
}

/* sections */
section { padding-bottom: 4.5rem; }
h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.7rem;
  margin-bottom: 2rem; border-top: 1px solid var(--rule); padding-top: 2.2rem;
}
.index { font-family: var(--mono); font-size: 0.8rem; color: var(--copper); margin-right: 0.9rem; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.2rem; }
.method-grid h3, .tier h3 {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 0.7rem;
}
.method-grid p { color: var(--bone-dim); font-size: 0.95rem; }

/* sample row */
.sample-row { margin-top: 3rem; border: 1px solid var(--rule); padding: 1.6rem; }
.sample-row figcaption {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bone-dim); margin-bottom: 1rem;
}
.sample-row table { border-collapse: collapse; width: 100%; }
.sample-row th {
  font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--copper); text-align: left;
  padding: 0.5rem 1.2rem 0.5rem 0; vertical-align: top; white-space: nowrap;
}
.sample-row td { padding: 0.5rem 0; color: var(--bone); font-size: 0.95rem; }

/* proposed rubric — a scoring model, not a spec sheet.

   The sample-row table styles its labels as short uppercase mono keys and
   relies on white-space:nowrap to keep them on one line. Rubric labels are
   written by a model from the buyer's own words and run to seventy-odd
   characters, so that treatment pushed the table to 617px inside a 335px
   figure and scrolled the whole page sideways on a phone. Here the label is
   prose that wraps and the weight is a fixed narrow column. */
.rubric-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.rubric-table th {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--bone);
  text-align: left; white-space: normal; overflow-wrap: anywhere;
  padding: 0.55rem 1rem 0.55rem 0; vertical-align: baseline;
  border-top: 1px solid var(--rule);
}
.rubric-table tr:first-child th, .rubric-table tr:first-child td { border-top: none; }
.rubric-table td {
  width: 3.5rem; text-align: right; vertical-align: baseline;
  font-family: var(--mono); font-size: 0.95rem; color: var(--copper);
  padding: 0.55rem 0; border-top: 1px solid var(--rule);
}

/* pricing */
.rate-group {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-dim);
  margin: 2.4rem 0 1rem;
}
.rate-group:first-of-type { margin-top: 1.6rem; }

/* a real rendered artifact, not an illustration */
.artifact { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }

/* proof surfaces — only ever rendered when real */
.testimonial-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }
.testimonial { margin: 0; border-left: 2px solid var(--copper); padding-left: 1.4rem; }
.testimonial p { color: var(--bone); line-height: 1.75; }
.testimonial cite {
  display: block; margin-top: 0.8rem; font-style: normal;
  font-family: var(--mono); font-size: 0.78rem; color: var(--bone-dim);
}
.traction {
  font-family: var(--mono); font-size: 0.82rem; color: var(--bone-dim);
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}

/* changelog — dated entries, so recency is visible rather than asserted */
.changelog { margin: 0; max-width: 48rem; }
.changelog dt {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--copper);
  padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--rule);
}
.changelog dt:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.changelog dd { margin: 0.8rem 0 0; }
.changelog h3 { margin-bottom: 0.5rem; }
.changelog p { color: var(--bone-dim); line-height: 1.8; }

/* founder block — the pitch is "trust our judgment", so a person is attached */
.founder { display: flex; gap: 2.4rem; align-items: flex-start; flex-wrap: wrap; }
.founder-photo {
  width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); flex: none;
}
.founder-note { flex: 1 1 26rem; max-width: 46rem; }
.founder-note h2 { margin-bottom: 1rem; }
.founder-note p { color: var(--bone-dim); line-height: 1.8; margin-bottom: 1.1rem; }
.founder-links a { color: var(--copper); font-family: var(--mono); font-size: 0.85rem; }
.colophon-credit { margin-top: 0.8rem; }
.colophon-credit a, .colophon-links a { color: var(--bone-dim); }
.colophon-credit a:hover, .colophon-links a:hover { color: var(--copper); }

/* objections, answered one scroll from the CTA */
.faq { border-top: 1px solid var(--rule); }
.faq-list { margin: 0; max-width: 52rem; }
.faq-list dt {
  font-family: var(--sans); font-size: 1.02rem; color: var(--bone);
  padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid var(--rule);
}
.faq-list dt:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.faq-list dd {
  margin: 0.6rem 0 0; color: var(--bone-dim); font-size: 0.95rem; line-height: 1.75;
}
.faq-list dd a { color: var(--copper); }

/* the category clarifier: the h1 is deliberately oblique, so the line that
   says which shelf we are on sits directly beneath it, above the fold */
.hero-clarifier {
  max-width: 46rem; margin: 1.2rem 0 0; color: var(--bone);
  font-size: 1.02rem; line-height: 1.65;
}

/* soft path for a visitor who will not hand over an email yet — deliberately
   low-weight so it never competes with the primary submit */
.cta-secondary {
  display: inline-block; margin-left: 1.2rem; color: var(--bone-dim);
  font-family: var(--mono); font-size: 0.82rem; text-decoration: none;
  border-bottom: 1px solid var(--rule); padding: 0.6rem 0;
}
.cta-secondary:hover { color: var(--copper); border-bottom-color: var(--copper); }

/* posted rates — a definition list, not cards: nothing here is bought with a
   card, so the page states the rate and lets the conversation scope the work */
.hero-sub { max-width: 44rem; margin-top: 1.4rem; }

.rate-card { margin: 0 0 1.8rem; }
.rate-card dt {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--copper);
  padding-top: 1.4rem; border-top: 1px solid var(--rule); margin-top: 1.4rem;
}
.rate-card dt:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.rate-card dd {
  margin: 0.5rem 0 0; color: var(--bone-dim); font-size: 0.95rem;
  max-width: 46rem; line-height: 1.7;
}

/* colophon */
.colophon {
  border-top: 1px solid var(--rule); margin-top: 2rem;
  padding: 2.4rem clamp(1.2rem, 5vw, 4rem) 3rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--bone-dim);
}
.colophon-rule { max-width: 46rem; margin-bottom: 1rem; }

@media (max-width: 40rem) {
  /* The hero sentence puts inline inputs inside prose. That reads well on a
     desktop and badly on a 375px phone, where each slot ends up a few
     characters wide. Below 40rem the slots become full-width fields stacked
     down the page: the sentence still reads, and every input is thumb-sized. */
  .madlibs-sentence { line-height: 2.4; }
  .madlibs-sentence .slot,
  .madlibs-sentence .slot-select {
    display: block; width: 100% !important; max-width: 100%;
    margin: 0.5rem 0 1.1rem; min-height: 2.75rem;  /* 44px tap target */
    font-size: 1rem; box-sizing: border-box;
  }
  .madlibs .contact-row input { min-height: 2.75rem; font-size: 1rem; }
  .madlibs button[type="submit"] {
    width: 100%; min-height: 2.75rem; font-size: 1rem;
  }
  .cta-secondary { display: block; margin: 1.2rem 0 0; min-height: 2.75rem; }

  .masthead nav a:not(.nav-cta) { display: none; }
  .masthead .nav-cta { min-height: 2.75rem; display: inline-flex; align-items: center; }

  /* Tables carry prose in the label column; let them use the full width and
     never force the page sideways. */
  .sample-row { padding: 1.1rem; }
  .sample-row table, .rubric-table { display: block; width: 100%; }
  .sample-row th, .sample-row td { overflow-wrap: anywhere; }
  .sample-row th { white-space: normal; }

  .founder { gap: 1.4rem; }
  .founder-photo { width: 5.5rem; height: 5.5rem; }
}