/* Landing page styles — externalized from the inline <style> block in
   landing.html for CSP style-src 'self' (DAST FIX 1). Byte-equivalent to the
   former inline block; the only change is the two @font-face src url()s, which
   now use a path relative to this file (static/css/ -> ../fonts/) instead of a
   Jinja url_for() — CSS url() can't carry a template expression, and both the
   CSS and the fonts are same-origin under /static, so font-src 'self' allows them. */
/* Self-hosted fonts (latin, variable) — extracted from the design bundle so
   nothing depends on an external origin. Josefin Sans = display; Mulish = text. */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/josefin-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/mulish-latin.woff2') format('woff2');
}

:root {
  --green-900: #1b2e28;
  --green-800: #223a32;
  --green-700: #2b473f;
  --mint: #86b3a8;
  --mint-hover: #9cc4b8;
  --cream: #f2efe7;
  --cream-card: #f4f1ea;
  --ink: #eef2ee;
  --ink-dim: #c8d6cf;
  --ink-muted: #9db3a9;
  --amber: #e6a77a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--green-800);
  color: var(--ink);
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Josefin Sans', sans-serif; margin: 0; }
a { color: var(--mint); text-decoration: none; }
a:hover { color: #a9cabf; }
em { font-style: italic; }
input { font-family: 'Mulish', sans-serif; }
::placeholder { color: #8fa79c; }

/* Accessible label hidden visually but read by screen readers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { position: relative; overflow: hidden; }
.container { max-width: 1200px; margin: 0 auto; }

/* ---- Header / nav ---- */
.nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 20px;
  padding: 26px 6vw;
}
.brand {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  letter-spacing: 3px; font-size: 15px; text-transform: uppercase;
}
.nav__spacer { flex: 1; }
.nav__byline {
  font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-muted);
}
.btn {
  display: inline-block; background: var(--mint); color: #183029;
  border: none; border-radius: 9px; padding: 12px 22px; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover { background: var(--mint-hover); color: #183029; }
.btn--sm { padding: 9px 18px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; }

/* ---- Hero ---- */
.hero {
  position: relative; min-height: 94vh; display: flex; flex-direction: column;
  background: var(--green-800);
}
.hero__grid, .cta__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(134,179,168,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134,179,168,.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.hero__glow {
  position: absolute; top: -120px; right: -80px; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(134,179,168,.20), transparent 62%);
}
.hero__body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
  padding: 20px 6vw 60px; max-width: 1320px; margin: 0 auto; width: 100%;
}
.hero__copy { flex: 1 1 460px; max-width: 640px; }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(134,179,168,.45); border-radius: 30px;
  padding: 7px 15px; margin-bottom: 26px;
}
.badge__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 4px rgba(134,179,168,.25);
}
.badge__text {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: #bcd2c9;
}
.hero h1 {
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  line-height: 1.04; font-size: clamp(40px, 5.2vw, 70px);
}
.hero__lede {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-dim);
  max-width: 520px; margin: 22px 0 0;
}
.hero__note {
  font-size: 13px; letter-spacing: .5px; color: var(--ink-muted); margin-top: 16px;
}

/* ---- Notify / capture form ---- */
.notify { scroll-margin-top: 90px; margin-top: 34px; max-width: 500px; }
.notify__row { display: flex; flex-wrap: wrap; gap: 10px; }
.notify__input {
  flex: 1 1 240px; background: #f2efe7; color: var(--green-800);
  border: 2px solid transparent; border-radius: 9px; padding: 14px 16px;
  font-size: 15px; outline: none;
}
.notify__input:focus { border-color: var(--mint); }
.notify__error { color: var(--amber); font-size: 13px; margin-top: 9px; }
.notify__notice { color: #bcd2c9; font-size: 13px; margin-top: 9px; }
.notify__notice:empty { display: none; }  /* live region present in DOM but no gap when idle */
.notify__fineprint { font-size: 12.5px; color: #8fa79c; margin-top: 11px; }
.notify__success {
  display: flex; align-items: center; gap: 14px;
  background: rgba(134,179,168,.14); border: 1px solid rgba(134,179,168,.5);
  border-radius: 11px; padding: 18px 20px;
}
.notify__check {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mint); color: #183029; display: flex;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
.notify__success-title {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; font-size: 14px;
}
.notify__success-sub { font-size: 13.5px; color: var(--ink-dim); margin-top: 2px; }

/* ---- Hero visual: the stakeholder email mock ---- */
.hero__visual { flex: 0 1 420px; min-width: 320px; }
.mock {
  background: var(--cream-card); color: #2b3a34; border-radius: 16px;
  box-shadow: 0 30px 70px rgba(10,24,19,.5); overflow: hidden;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50% { transform: translateY(-10px) rotate(-1.4deg); }
}
@media (prefers-reduced-motion: reduce) { .mock { animation: none; } }
.mock__bar {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  background: #e7e2d6; border-bottom: 1px solid #d8d2c3;
}
.mock__dot { width: 11px; height: 11px; border-radius: 50%; }
.mock__dot--r { background: #d98c6a; }
.mock__dot--y { background: #e3c17a; }
.mock__dot--g { background: #8fbca0; }
.mock__tab {
  margin-left: 8px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #8a8474; font-family: 'Josefin Sans', sans-serif; font-weight: 600;
}
.mock__inner { padding: 22px 24px; }
.mock__from { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mock__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-700); color: var(--cream-card); display: flex;
  align-items: center; justify-content: center;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1px;
}
.mock__who { flex: 1; }
.mock__name { font-weight: 700; font-size: 15px; }
.mock__role { font-size: 12.5px; color: #7c8a80; }
.mock__flag {
  background: #e7ede8; color: #3c574c; border: 1px solid #cdd8d1; border-radius: 20px;
  padding: 4px 10px; font-family: 'Josefin Sans', sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}
.mock__subject {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: 10px;
}
.mock__quote { font-size: 14px; line-height: 1.65; color: #3f4c45; margin: 0; }
.mock__caption {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed #d0cabb;
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #6f7c73;
}
.mock__caption-steps {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--green-700);
}

/* ---- Animated hero EMAIL thread (default) + static fallback ---- */
.mock--static { display: none; }  /* shown only under reduced-motion */

/* Email reading-pane look: stacked messages with header rows + hairlines —
   deliberately NOT chat bubbles (the experience is email, not messaging). */
.mail { padding: 18px 22px 22px; position: relative; }
.mail__msg { position: relative; }
.mail__msg--out {
  padding-left: 13px; border-left: 3px solid var(--mint);
}
.mail__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mail__avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--green-700); color: var(--cream-card); display: flex;
  align-items: center; justify-content: center;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .5px;
}
.mail__avatar--me { background: var(--mint); color: #14261f; }
.mail__meta { flex: 1; min-width: 0; }
.mail__row1 { display: flex; align-items: baseline; gap: 8px; }
.mail__from { font-weight: 700; font-size: 14px; color: #2b3a34; }
.mail__time { margin-left: auto; font-size: 11.5px; color: #9aa79f; white-space: nowrap; }
.mail__to { font-size: 11.5px; color: #8a978e; }
.mail__subject {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 13.5px;
  color: #3c574c; margin-bottom: 5px;
}
.mail__body { font-size: 13.5px; line-height: 1.6; color: #3f4c45; margin: 0; }
/* Reply zone: a threaded reply below a hairline; the compose beat overlays its
   reserved slot so the card height never jumps. */
.mail__replyzone {
  position: relative; min-height: 122px; margin-top: 15px;
  padding-top: 15px; border-top: 1px solid #e4dfd0;
}
.mail__composing {
  position: absolute; top: 15px; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-style: italic; color: #8a978e;
}
.mail__pen { font-style: normal; }
.mail__caret {
  display: inline-block; width: 2px; height: 14px; background: #6f8a7f;
  animation: emCaret 1.1s steps(1) infinite;
}
.mail__graded {
  display: block; width: max-content; margin: 14px 0 0 auto;
  background: var(--mint); color: #14261f; font-family: 'Josefin Sans', sans-serif;
  font-weight: 700; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 6px; padding: 6px 12px;
}

/* Sequenced loop (~13s): email lands → compose reply → reply sent → graded. */
.em-gus       { animation: emGus 13s ease infinite both; }
.em-composing { animation: emComposing 13s ease infinite both; }
.em-reply     { animation: emReply 13s ease infinite both; }
.em-graded    { animation: emGraded 13s ease infinite both; }
@keyframes emGus {
  0% { opacity: 0; transform: translateY(10px); }
  6% { opacity: 1; transform: none; }
  92% { opacity: 1; } 98%, 100% { opacity: 0; }
}
@keyframes emComposing {
  0%, 24% { opacity: 0; } 30%, 46% { opacity: 1; } 52%, 100% { opacity: 0; }
}
@keyframes emReply {
  0%, 50% { opacity: 0; transform: translateY(8px); }
  58% { opacity: 1; transform: none; }
  92% { opacity: 1; } 98%, 100% { opacity: 0; }
}
@keyframes emGraded {
  0%, 70% { opacity: 0; transform: translateY(6px) scale(.92); }
  77% { opacity: 1; transform: none; }
  92% { opacity: 1; } 98%, 100% { opacity: 0; }
}
@keyframes emCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Reduced motion: no animation — show today's static email card instead. */
@media (prefers-reduced-motion: reduce) {
  .mock--live { display: none; }
  .mock--static { display: block; }
}

/* ---- Flow band: Discover → Design → Build → Get Graded (+ reps loop) ---- */
.flow {
  position: relative; z-index: 2; background: var(--green-700); color: var(--ink);
  padding: 26px 6vw;
}
.flow__inner {
  max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 14px 16px;
}
.flow__step {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: clamp(15px, 1.7vw, 19px);
}
.flow__step .flow__num { color: var(--mint); margin-right: 9px; }
.flow__arrow { color: var(--mint); font-size: 18px; }
/* Loop-back refrain — the "reps" theme. */
.flow__loop {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; letter-spacing: 1px; color: var(--mint); font-style: italic;
  padding-left: 6px;
}
.flow__loop-arrow { font-style: normal; font-size: 19px; line-height: 1; }

/* ---- "What it is" pillars ---- */
.pillars { background: var(--cream); color: #2b3a34; padding: 88px 6vw; }
.eyebrow {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; font-size: 12px; color: #6f8a7f;
}
.pillars h2 {
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 38px); margin: 12px 0 0; max-width: 760px; line-height: 1.12;
}
.pillars__row { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 52px; }
.pillar { flex: 1 1 280px; }
.pillar__num {
  width: 46px; height: 46px; border-radius: 11px; background: #e3ebe5;
  border: 1px solid #cdd8d1; display: flex; align-items: center; justify-content: center;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; color: #3c574c; font-size: 18px;
}
.pillar h3 {
  font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  font-size: 18px; margin: 18px 0 9px;
}
.pillar p { font-size: 14.5px; line-height: 1.65; color: #54625b; margin: 0; }

/* ---- Trust block ---- */
.promise {
  margin-top: 56px; background: var(--green-700); color: var(--ink);
  border-radius: 16px; padding: 34px 38px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
}
.promise__head { flex: 1 1 340px; }
.promise__eyebrow {
  font-family: 'Josefin Sans', sans-serif; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; font-size: 12px; color: var(--mint);
}
.promise h3 {
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  font-size: 24px; margin: 10px 0 0;
}
.promise__body { flex: 1 1 340px; font-size: 14.5px; line-height: 1.7; color: var(--ink-dim); margin: 0; }

/* ---- Closing CTA ---- */
.cta {
  background: var(--green-800); padding: 96px 6vw; text-align: center;
  position: relative; overflow: hidden;
}
.cta__inner { position: relative; max-width: 680px; margin: 0 auto; }
.cta h2 {
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  font-size: clamp(30px, 4vw, 50px); line-height: 1.08;
}
.cta__lede { font-size: 17px; line-height: 1.6; color: var(--ink-dim); margin: 20px 0 34px; }
.cta .btn { padding: 16px 34px; font-size: 14px; letter-spacing: 1.6px; }

/* ---- Footer ---- */
.footer { background: var(--green-900); color: var(--ink-muted); padding: 44px 6vw; }
.footer__inner {
  max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: 20px; align-items: center;
}
.footer__brand-col { flex: 1 1 300px; }
.footer__brand {
  font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; font-size: 14px; color: var(--ink);
}
.footer__tag { font-size: 12.5px; letter-spacing: 1px; margin-top: 7px; }
.footer__contact { flex: 0 1 auto; font-size: 13px; text-align: right; }
.footer__copy { margin-top: 6px; color: #6f877c; }

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .footer__contact { text-align: left; }
}