/* FenceCalc Pro — marketing site.
 *
 * Brand tokens are duplicated from the application's ui/app.css deliberately. A shared
 * stylesheet would be a dependency between a private repository and a public one, which is
 * exactly the coupling this repo exists to avoid. If a colour changes, change it in both —
 * two lines is cheaper than the coupling.
 *
 * Plain CSS, no build step, no framework. See README rule 3.
 */

:root {
  --ink:    #14201F;
  --navy:   #1B4965;
  --deep:   #0E2A3B;
  --steel:  #51636B;
  --mute:   #7A8C93;
  --rust:   #A8532C;
  --tan:    #8A6E3E;
  --ok:     #1B7A5A;
  --ground: #F5F1E9;

  --measure: 34rem;          /* a readable line, not a full-width paragraph */
  --gap: clamp(1.5rem, 4vw, 3.5rem);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.65 "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Big Shoulders Display", "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(2.75rem, 8vw, 5.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: 1.125rem; text-transform: none; font-family: "IBM Plex Sans", sans-serif;
     letter-spacing: 0; font-weight: 600; }

p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: var(--navy); }

.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }

/* --- masthead ------------------------------------------------------------- */
.masthead {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 1.5rem 0;
}
.masthead b {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.masthead span { color: var(--mute); font-size: 0.8125rem; }

/* --- hero ----------------------------------------------------------------- */
.hero { padding: clamp(3rem, 9vw, 7rem) 0 var(--gap); }
.hero h1 { max-width: 15ch; }
.hero .lede {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  color: var(--steel); margin-top: 1.25rem; max-width: 42ch;
}

.cta {
  display: inline-block; margin-top: 2rem;
  background: var(--navy); color: var(--ground);
  padding: 0.85rem 1.6rem; border-radius: 2px;
  font-weight: 600; text-decoration: none;
}
.cta:hover { background: var(--deep); }

/* There is deliberately no sign-in button. See README rule 1. */

/* --- the claim ------------------------------------------------------------ */
.claim {
  background: var(--deep); color: var(--ground);
  padding: var(--gap) 0; margin-block: var(--gap);
}
.claim p { color: var(--ground); font-size: clamp(1.25rem, 3vw, 1.75rem); max-width: 30ch; }
.claim .note { font-size: 0.9375rem; color: var(--mute); max-width: var(--measure); }

/* --- feature grid --------------------------------------------------------- */
.grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  padding-block: var(--gap);
}
.grid p { color: var(--steel); font-size: 0.9688rem; }
.grid h3 { margin-bottom: 0.4rem; }
.grid .rule { width: 2.5rem; height: 3px; background: var(--rust); margin-bottom: 0.9rem; }

/* --- footer --------------------------------------------------------------- */
footer {
  border-top: 1px solid rgba(20, 32, 31, 0.12);
  padding: 2rem 0 3rem; color: var(--mute); font-size: 0.875rem;
}
footer p { max-width: none; }

@media (prefers-reduced-motion: no-preference) {
  a, .cta { transition: background-color 120ms ease; }
}