/* ============================================================================
   BELLWETHER — front door
   Palette/tokens deliberately echo the in-app design system (ground,
   ink, teal accent) so the site reads as a genuine extension of the
   product, not a mismatched marketing wrapper.
   ============================================================================ */

:root {
  --ground:        #ECEEEC;
  --surface:        #FFFFFF;
  --ink:            #12171A;
  --ink-secondary:  #444E52;
  --ink-muted:      #7C8788;
  --hairline:       rgba(18,23,26,0.14);
  --hairline-soft:  rgba(18,23,26,0.08);
  --accent:         #0E7C86;
  --accent-strong:  #0B646C;
  --accent-deep:    #084F57;
  --accent-soft:    rgba(14,124,134,0.09);
  --accent-ink:     #FFFFFF;

  --font-display: ui-serif, Iowan Old Style, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; }

p { margin: 0; }

a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------- skip link -------------------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--ground);
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* -------------------- focus -------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------- masthead -------------------- */
.masthead {
  border-bottom: 1px solid var(--hairline);
}
.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  color: var(--accent);
  display: inline-flex;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.masthead-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-link {
  text-decoration: none;
  color: var(--ink-secondary);
  font-size: 0.95rem;
}
.nav-link:hover { color: var(--ink); }

/* -------------------- buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-strong); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: var(--ink); }

.btn-small {
  padding: 9px 18px;
  font-size: 0.9rem;
  background: var(--ink);
  color: var(--ground);
}
.btn-small:hover { background: var(--accent-deep); }

/* -------------------- hero -------------------- */
.hero {
  padding: 88px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  min-height: 480px;
}
.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 18px;
}
h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.hero-lede {
  margin-top: 26px;
  max-width: 46ch;
  font-size: 1.14rem;
  color: var(--ink-secondary);
  line-height: 1.6;
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hero graphic: a bold rising arrow, scaled up from the same zigzag
   language as the brand mark in the masthead/favicon (see .brand-mark
   above) - a big version of the site's own mark, not a second, unrelated
   motif. Deliberately just two strokes, no fills - simple and robust. */
.hero-figure {
  position: absolute;
  top: -10px;
  right: -70px;
  bottom: 0;
  width: 62%;
  display: flex;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}
.growth-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.gc-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gc-head {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gc-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: gc-draw 1s cubic-bezier(.3,.75,.35,1) forwards;
}
.gc-fade { opacity: 0; animation: gc-fade 0.4s ease forwards; }
@keyframes gc-draw { to { stroke-dashoffset: 0; } }
@keyframes gc-fade { to { opacity: 1; } }
.gc-delay-1 { animation-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .gc-draw, .gc-fade { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* -------------------- features (editorial, not cards) -------------------- */
.features {
  padding: 40px 0 96px;
}
.feature-row {
  padding: 40px 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: baseline;
}
.feature-row:last-child {
  border-bottom: 1px solid var(--hairline);
}
.feature-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.feature-row h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  grid-column: 2;
}
.feature-row p {
  grid-column: 2;
  color: var(--ink-secondary);
  max-width: 62ch;
  font-size: 1.02rem;
}

/* -------------------- CTA band -------------------- */
.cta-band {
  background: var(--ink);
  color: var(--ground);
  padding: 64px 0;
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.cta-band h2 {
  font-size: 1.8rem;
  color: var(--ground);
}
.cta-band .btn-secondary {
  color: var(--ground);
  border-color: rgba(236,238,236,0.28);
}
.cta-band .btn-secondary:hover { border-color: var(--ground); }

/* -------------------- footer -------------------- */
.site-footer {
  padding: 36px 0 48px;
}
.footer-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.footer-word {
  font-size: 1rem;
  color: var(--ink-secondary);
}

/* -------------------- responsive -------------------- */
@media (max-width: 840px) {
  .hero-inner { min-height: 0; }
  .hero-copy { max-width: none; }
  .hero-figure {
    position: relative;
    inset: auto;
    width: auto;
    height: 190px;
    margin: 24px 0 4px;
    justify-content: center;
  }
  /* Sized by height, not width, here - .growth-svg's base rule
     (width:100%; height:auto) is exactly backwards for a fixed-height
     mobile band: it let the arrow's actual rendered height (governed by
     the viewBox's aspect ratio) run past the 200px box with nothing
     constraining it, so it overflowed both above and below its own
     container instead of fitting inside it. */
  .hero-figure .growth-svg { width: auto; height: 100%; max-width: 100%; }
  .hero { padding: 48px 0 40px; }
  .feature-row {
    grid-template-columns: 1fr;
  }
  .feature-row h2, .feature-row p { grid-column: 1; }
  .feature-label { margin-bottom: 8px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 520px) {
  .masthead-row { padding: 14px 18px; }
  .nav-link { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}