/* Efficient Components — efficomp.dev
   Light theme only. No webfonts: the page must not depend on a font load. */

:root {
  --bg: #fdfcfa;
  --ink: #14130f;
  --muted: #5c594f;
  --rule: #e4e0d7;
  --accent: #9c3d14;
  --measure: 36rem;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 45rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 6vw, 4rem);
}

p { max-width: var(--measure); }

a {
  color: var(--accent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--ink); }

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

/* Hero */

.hero {
  padding-block: clamp(3.5rem, 11vw, 7.5rem) clamp(3rem, 9vw, 6rem);
}

.wordmark {
  --mark: clamp(2rem, 1.7rem + 1.1vw, 2.75rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(2.5rem, 7vw, 4.5rem);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The mark carries its own whitespace inside the viewBox, so it is set larger
   than the type it locks up with to read at the same optical weight, and pulled
   left by that inset (8.7% of the box) so the ring — not the bounding box —
   lines up with the text column below it. */
.wordmark img {
  flex: none;
  width: var(--mark);
  height: auto;
  margin-left: calc(var(--mark) * -0.087);
}

h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lead {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 33rem;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  line-height: 1.5;
}

/* Sections */

section {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.label {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

h2 {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  max-width: 20ch;
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.375rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

section p { margin: 0 0 1.15em; }
section p:last-child { margin-bottom: 0; }

/* Tiers — the commercial ask, so the names carry the weight */

.tiers {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 48em) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.tiers > li {
  border-top: 2px solid var(--ink);
  padding-top: 0.9rem;
}

.tiers h3 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tiers p {
  margin: 0;
  max-width: none;
  color: var(--muted);
}

/* Engagement steps */

.steps {
  margin: 0 0 clamp(2rem, 5vw, 2.75rem);
  padding: 0;
  max-width: var(--measure);
  list-style: none;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1rem;
}

.steps > li:last-child { margin-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
}

.cta {
  max-width: 33rem;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
}

.cta a { font-weight: 600; }

/* Footer — laid out to take more lines and a second column later */

footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 4rem;
  justify-content: space-between;
  align-items: start;
}

.footer-block p { margin: 0 0 0.35rem; }
.footer-block p:last-child { margin-bottom: 0; }

.footer-name {
  color: var(--ink);
  font-weight: 600;
}