:root {
  --bg:        #0F172A;
  --surface:   #1E293B;
  --border:    #334155;
  --green:     #22C55E;
  --green-dim: #14532D;
  --sky:       #38BDF8;
  --text:      #F8FAFC;
  --text-soft: #CBD5E1;
  --text-faint:#7C8BA1;
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.6;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  width: min(100% - 3rem, 40rem);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 0 3rem;
  gap: 3.5rem;
}
.mark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.mark svg { flex-shrink: 0; }
.mark img { height: 3rem; width: auto; flex-shrink: 0; display: block; }
.mark h1 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mark a { color: inherit; text-decoration: none; }
.lede h2 {
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lede p {
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: 1.05rem;
  max-width: 34rem;
  text-wrap: pretty;
}
.product {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.product .kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.product h3 { font-size: 1.25rem; font-weight: 700; }
.product p  { color: var(--text-soft); font-size: 0.97rem; }
.product .status {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}
/* Primary call-to-action — the contact page's email button. */
.btn {
  align-self: flex-start;
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--green);
  color: var(--bg);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
}
.btn:hover, .btn:focus-visible { background: #16A34A; }
.backlink {
  color: var(--text-faint);
  font-size: 0.9rem;
  text-decoration: none;
}
.backlink:hover, .backlink:focus-visible { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* The horizon band above the footer. Full-bleed on purpose — a landscape
   boxed inside the 40rem text column read as an ornament in a container
   rather than a horizon (founder, 2026-09-09: "at least it gotta look
   like this sketch").

   DEPTH COMES FROM THE PALETTE, not from new colours: a ridge farther
   away is hazed lighter by the air in front of it, so the far range takes
   the lightest token and each nearer layer takes a darker one. No layer's
   summit sits under the one behind it, which is what makes the range read
   as depth rather than as a repeated sawtooth.

   The foothills are the brand green, but --green-dim is LIGHTER than
   --surface behind it, and a near layer lighter than a far one inverts
   the whole cue — it read as a lawn in front of the range. Knocking it
   back into the page ground keeps the brand colour and restores the
   order.

   It scales PROPORTIONALLY. The old one carried preserveAspectRatio
   "none" and stretched, so its peaks flattened on every screen wider
   than the viewBox — proportions by accident, designed for nothing. */
.ridge { line-height: 0; }
.ridge svg { display: block; width: 100%; height: auto; }
.ridge-far  { fill: var(--border); }
.ridge-mid  { fill: var(--surface); }
.ridge-near { fill: var(--green-dim); opacity: 0.55; }
.ridge-snow { fill: var(--text-soft); opacity: 0.8; }
footer {
  border-top: 1px solid var(--border);
  padding: 1.4rem 0 2rem;
}
footer .wrap-f {
  width: min(100% - 3rem, 40rem);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-faint);
}
footer nav { display: flex; gap: 1.6rem; }
footer a { color: var(--text-soft); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 3px; }