/* Drainage Study — brand guidelines v1.0.
   True Blue + white carry it; Ink/Slate/Paper/rule are the only support.
   Helvetica is the voice, IBM Plex Mono is the evidence: every measured
   value, unit, coordinate and field label. */

:root {
  --blue:      #3D63F5;
  --blue-soft: #ECF0FE;
  --blue-edge: #C3D0FB;
  --blue-deep: #2748C9;
  --ink:       #101B2E;
  --slate:     #48597A;
  --paper:     #F6F8FB;
  --rule:      #DCE2EB;
  --label:     #5F6E8A;
  --white:     #FFFFFF;

  --voice: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--voice);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--blue); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* mono label — the evidence typeface, used for every field label */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
}

/* ============================ top bar ============================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 22px var(--gut) 0;
}
.brandmark {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--blue); text-decoration: none;
}
.brandmark .mark { width: 30px; height: 30px; flex: none; }
.wordmark {
  font-family: var(--voice);
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink);
}
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
  border: 1px solid var(--rule); border-radius: 100px;
  padding: 5px 11px 5px 9px; background: var(--white);
}
.status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ============================ hero ============================ */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(34px, 6vh, 72px) var(--gut) clamp(40px, 7vh, 84px);
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}

.kicker {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--label);
  line-height: 1.6; margin: 0 0 18px;
  max-width: 46ch;
}

.display {
  font-size: clamp(40px, 6.4vw, 70px);
  line-height: 1.02; letter-spacing: -0.032em; font-weight: 700;
  margin: 0 0 20px; color: var(--ink);
}

.lede {
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.62; color: var(--slate);
  margin: 0 0 30px; max-width: 52ch;
}

/* ---- waitlist form ---- */
.waitlist { margin: 0; }
.waitlist .label { display: block; margin-bottom: 9px; }
.field-row { display: flex; gap: 9px; flex-wrap: wrap; }
.waitlist input[type=email] {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--voice); font-size: 15px; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.waitlist input[type=email]::placeholder { color: #9AA6BC; }
.waitlist input[type=email]:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.waitlist button {
  flex: none;
  font-family: var(--voice); font-size: 15px; font-weight: 600;
  color: var(--white); background: var(--blue);
  border: 1px solid var(--blue); border-radius: 8px;
  padding: 12px 20px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.waitlist button:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.waitlist button:disabled { opacity: .55; cursor: default; }
.note {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--label); margin: 10px 0 0;
}
.formstate {
  font-family: var(--mono); font-size: 12px; margin: 10px 0 0; min-height: 1em;
}
.formstate.ok  { color: #0E7C61; }
.formstate.err { color: #C2313B; }

/* ---- the catchment figure: the mark doubles as the drawing surface ---- */
.figure {
  margin: 0; background: var(--white);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(16,27,46,.04), 0 12px 28px -18px rgba(16,27,46,.18);
}
/* The mark doubles as the drawing surface, so it gets the room: the
   delineated area is drawn in True Blue and filled pale blue, and the
   measured values read underneath it like an instrument panel. */
.draw { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.catch-fill { fill: var(--blue-soft); opacity: 0; }
.catch-line {
  fill: none; stroke: var(--blue); stroke-width: 3.2;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.flowpath {
  fill: none; stroke: var(--blue-edge); stroke-width: 2.2;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
}
.poi      { fill: var(--blue); opacity: 0; }
.poi-ring { fill: none; stroke: var(--blue-edge); stroke-width: 2; opacity: 0; }

.is-live .catch-line { animation: trace 1500ms cubic-bezier(.55,.1,.3,1) forwards; }
.is-live .catch-fill { animation: fade  700ms ease 1150ms forwards; }
.is-live .flowpath   { animation: trace 900ms  ease 1250ms forwards; }
.is-live .poi-ring   { animation: pop   500ms ease 1650ms forwards; }
.is-live .poi        { animation: pop   500ms ease 1750ms forwards; }

@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes fade  { to { opacity: 1; } }
@keyframes pop   { from { opacity: 0; } to { opacity: 1; } }

.readout {
  border-top: 1px solid var(--rule);
  margin-top: 10px; padding-top: 15px;
}
.readout .num {
  font-family: var(--mono); font-weight: 500;
  font-size: 46px; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); margin-top: 10px;
}
.readout .unit {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .05em; color: var(--label); margin-top: 6px;
}
.readout .says {
  font-size: 13.5px; line-height: 1.5; color: var(--slate);
  margin: 12px 0 0; max-width: 44ch;
}

/* ============================ bands ============================ */
.band { border-top: 1px solid var(--rule); padding: clamp(44px, 7vh, 84px) 0; }
.band--paper { background: var(--paper); }
.section-label { display: block; margin: 0 0 26px; }

/* ---- steps ---- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.steps li { border-top: 2px solid var(--blue); padding-top: 14px; }
.step-n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; color: var(--blue);
}
.steps h3 { font-size: 17px; letter-spacing: -0.012em; margin: 7px 0 7px; }
.steps p  { font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 0; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; padding: 20px 20px 22px;
}
.card h3 { font-size: 16px; letter-spacing: -0.01em; margin: 0 0 8px; }
.card p  { font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 0; }

/* ---- methods ---- */
.methods { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(28px, 5vw, 60px); }
.claim {
  font-size: clamp(24px, 3vw, 32px); line-height: 1.22;
  letter-spacing: -0.022em; font-weight: 700; margin: 0 0 18px;
}
.methods .body { font-size: 15.5px; line-height: 1.62; color: var(--slate); margin: 0 0 14px; max-width: 54ch; }
.standards { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.standards li {
  display: grid; grid-template-columns: 140px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.standards b {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink);
}
.standards span { font-size: 13.5px; line-height: 1.45; color: var(--slate); }

/* ---- who ---- */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); }
.who h3 { font-size: 19px; letter-spacing: -0.015em; margin: 0 0 10px; }
.who p  { font-size: 15.5px; line-height: 1.62; color: var(--slate); margin: 0; }

/* ---- cta band ---- */
.band--blue { background: var(--blue); border-top: none; color: var(--white); }
.cta { max-width: 640px; }
.cta h2 {
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18;
  letter-spacing: -0.025em; margin: 0 0 14px;
}
.cta p { font-size: 16px; line-height: 1.6; margin: 0 0 24px; color: rgba(255,255,255,.88); }
.waitlist--invert input[type=email] { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: var(--white); }
.waitlist--invert input[type=email]::placeholder { color: rgba(255,255,255,.6); }
.waitlist--invert input[type=email]:focus {
  border-color: var(--white); background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}
.waitlist--invert button { background: var(--white); border-color: var(--white); color: var(--blue); }
.waitlist--invert button:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.waitlist--invert .formstate.ok  { color: #D6FFEF; }
.waitlist--invert .formstate.err { color: #FFE0E2; }

/* ============================ footer ============================ */
.foot { background: var(--ink); color: rgba(255,255,255,.72); padding: 26px 0; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot p { margin: 0; font-size: 14px; }
.foot a { color: var(--white); }
.foot .label { color: rgba(255,255,255,.5); }

/* ============================ responsive ============================ */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 22px 26px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: clamp(26px, 4vh, 40px); }
  .methods, .who { grid-template-columns: 1fr; }
  .figure { order: -1; }
}
@media (max-width: 620px) {
  .steps, .cards { grid-template-columns: 1fr; }
  .readout .num { font-size: 40px; }
  .standards li { grid-template-columns: 1fr; gap: 2px; }
  .topbar { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .catch-line, .flowpath { stroke-dashoffset: 0; }
  .catch-fill, .poi, .poi-ring { opacity: 1; }
  .is-live .catch-line, .is-live .catch-fill,
  .is-live .flowpath, .is-live .poi, .is-live .poi-ring { animation: none; }
}