/* ==========================================================================
   HemoExchange — stylesheet
   Plain CSS. No framework, no build step.

   Structure of this file:
     1.  Design tokens (colours, fonts, sizes defined once, reused everywhere)
     2.  Reset and base
     3.  Layout helpers
     4.  Typography
     5.  Buttons
     6.  Navigation
     7.  Hero
     8.  Cards, steps and tags
     9.  Callouts and notices
     10. Forms
     11. Dark register section
     12. Footer
     13. Responsive rules (nav collapse, then tablet, then mobile)
   ========================================================================== */


/* ---------- 1. DESIGN TOKENS -------------------------------------------- */

:root {
  /* Colour palette.
     Neutrals are a cool, very light grey; the navy and red accents are
     shared with the sibling product HemoEdge. */
  --bg:         #F3F4F6;   /* page background, very light grey */
  --bg-lift:    #FAFAFB;   /* alternating section background, near white */
  --navy:       #0B1440;   /* headings, footer */
  --navy-deep:  #070E2B;   /* dark call-to-action band */
  --red:        #8B0016;   /* primary accent */
  --red-hi:     #A81428;   /* accent, hover state */
  --red-pale:   #F6E7E9;   /* accent, very light fill */
  --line:       #E3E5EA;   /* hairline borders */
  --line-strong:#C9CDD6;   /* stronger borders: ghost button, input hover */
  --slate:      #5C6070;   /* body text */
  --ink:        #33384A;   /* darker body text */
  --tube:       #666B80;   /* muted / secondary text (WCAG AA on both backgrounds) */

  /* Type stacks. The Google font is listed first; if it fails to load the
     browser falls back to the system fonts after it, and the page still works. */
  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Layout */
  --wrap: 1160px;
  --gutter: 32px;
  --sec-pad: 102px;   /* vertical breathing room between sections */
  --radius: 2px;      /* deliberately sharp, clinical, not rounded */
}


/* ---------- 2. RESET AND BASE ------------------------------------------- */

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

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

/* Offset for the sticky header when jumping to an anchor */
:target { scroll-margin-top: 96px; }
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

/* Visible focus ring for keyboard users, on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

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

/* Skip link: hidden until focused with the keyboard */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff;
  padding: 10px 16px; border-radius: var(--radius);
  font-size: 14px; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* Respect the operating system "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ---------- 3. LAYOUT HELPERS ------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec { padding-block: var(--sec-pad); }
.sec-base { background: var(--bg); }
.sec-lift  { background: var(--bg-lift); }
.sec-dark  { background: var(--navy-deep); color: #fff; }

.grid { display: grid; gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }


/* ---------- 4. TYPOGRAPHY ----------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1.display { font-size: clamp(34px, 5vw, 52px); margin-bottom: 24px; }
h2.display { font-size: clamp(29px, 3.6vw, 45px); max-width: 20ch; }
.sec-dark h2.display { color: #fff; }

/* The accent phrase inside the hero headline */
h1.display em { font-style: normal; color: var(--red); }

h3 {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 8px;
}

/* Small uppercase mono label above each section heading */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
  display: flex;
  /* flex-start, not center, so the dot stays level with the FIRST line
     when the label wraps onto two lines on narrow screens */
  align-items: flex-start;
  gap: 9px;
}
.eyebrow-light { color: #E9A2AE; }

.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor; flex: none;
  margin-top: 5px;
}

.lede {
  font-size: 17px;
  line-height: 1.68;
  color: var(--slate);
  margin: 22px 0 0;
  max-width: 62ch;
}
.lede.narrow { max-width: 58ch; }
.sec-dark .lede { color: rgba(255, 255, 255, 0.72); }

.prose { margin-top: 26px; max-width: 68ch; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--slate); margin: 0 0 18px; }

/* "Launching initially in the UK" */
.flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 26px 0 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--navy);
  background: var(--red-pale);
  border: 1px solid #EBD2D6;
  border-radius: var(--radius);
  padding: 8px 14px;
}
.flag span { color: var(--red); font-size: 9px; line-height: 1; }


/* ---------- 5. BUTTONS -------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  padding: 13px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hi); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--navy); background: rgba(11, 20, 64, 0.04); }

.btn-block { display: block; width: 100%; margin-top: 6px; }
.btn[disabled] { opacity: .6; cursor: progress; }


/* ---------- 6. NAVIGATION ----------------------------------------------- */

.nav-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 244, 246, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }

/* The supplied logo lockup. Height is set here and the width follows the
   image's own proportions, so the file can be swapped without touching CSS. */
.brand-logo { display: block; height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav-list {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav-list a {
  font-size: 14.5px; color: var(--ink); text-decoration: none;
  transition: color .15s ease;
}
.nav-list a:hover { color: var(--red); }
.nav-cta { padding: 10px 18px; font-size: 14.5px; }

/* Hamburger button, shown only on small screens */
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px; cursor: pointer;
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars span {
  display: block; height: 1.5px; background: var(--navy);
  margin: 3.5px 0; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* ---------- 7. HERO ----------------------------------------------------- */

.hero { padding-block: 88px 100px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }


/* ---------- 8. CARDS, STEPS AND TAGS ------------------------------------ */

.card {
  background: var(--bg-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.sec-lift .card { background: var(--bg); }
.card p { margin: 0; font-size: 14.8px; line-height: 1.62; color: var(--slate); }

/* Numbered steps */
.steps { counter-reset: none; }
.step {
  border-top: 2px solid var(--navy);
  padding-top: 20px;
}
.step-num {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin: 0 0 12px;
}
.step p { margin: 0; font-size: 14.8px; line-height: 1.62; color: var(--slate); }
.step h3 { margin-bottom: 10px; }

/* Audience tags in the pilot section */
.tag {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-lift);
  padding: 22px 22px 24px;
}
.tag-cat {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tube); margin-bottom: 12px;
}
.tag h3 { margin: 0; }


/* ---------- 9. CALLOUTS AND NOTICES ------------------------------------- */

/* Neutral clarification block */
.callout {
  margin: 40px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--tube);
  background: rgba(138, 143, 164, 0.08);
  font-size: 15px; line-height: 1.66; color: var(--ink);
  max-width: 78ch;
}
.callout strong { color: var(--navy); }

/* The prominent pre-launch statement */
.notice {
  margin: 44px 0 0;
  padding: 26px 30px;
  background: var(--red-pale);
  border: 1px solid #EBD2D6;
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--navy);
}


/* ---------- 10. FORMS --------------------------------------------------- */

.form-card { padding: 28px 26px 26px; background: var(--bg-lift); }
.form-card .eyebrow { margin-bottom: 20px; }

.interest-form { display: block; }

/* Honeypot: a decoy field hidden from people, which bots tend to fill in.
   If it arrives filled, Formspree treats the submission as spam. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field { margin: 0 0 12px; display: block; }
.field label {
  display: block;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink); margin-bottom: 6px;
}
.field .opt { color: var(--tube); font-weight: 400; }

.field input,
.field select {
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--navy);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  transition: border-color .15s ease;
}
.field input:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus { border-color: var(--red); }
.field select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* A field the browser flagged as invalid on submit */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--red); background: #FCF6F6; }

/* Segmented Laboratory / Reviewer switch.
   Built from real radio buttons, so it works with no JavaScript at all. */
.seg-wrap { border: 0; padding: 0; margin: 0 0 18px; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  text-align: center;
  padding: 11px 8px;
  font-size: 13.5px; font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.seg label:hover { background: rgba(11, 20, 64, 0.04); }
.seg input:checked + label { background: var(--navy); color: #fff; }
.seg input:focus-visible + label { outline: 2px solid var(--red); outline-offset: -2px; }

.fine {
  margin: 14px 0 0;
  font-size: 12.5px; line-height: 1.55; color: var(--tube);
}
.fine strong { color: var(--slate); }

/* Submission result message. Hidden until JavaScript gives it text. */
.form-status {
  margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.55;
  padding: 11px 13px;
  border-radius: var(--radius);
  display: none;
}
.form-status.is-ok    { display: block; background: #EAF2EC; border: 1px solid #C6DCCC; color: #1F4A2C; }
.form-status.is-error { display: block; background: var(--red-pale); border: 1px solid #EBD2D6; color: var(--red); }


/* ---------- 11. DARK REGISTER SECTION ----------------------------------- */

.reg-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.reg-note {
  margin: 26px 0 0;
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 52ch;
}

/* The form sits on light grey even inside the dark band, for contrast and legibility */
.form-card-dark { background: var(--bg-lift); color: var(--navy); }


/* ---------- 12. FOOTER -------------------------------------------------- */

.foot {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.64);
  padding-block: 52px 46px;
  font-size: 14px;
}

.foot-top {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.foot-loc {
  margin: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.foot-about {
  margin: 26px 0 0;
  max-width: 82ch;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.56);
}

.foot-legal { margin: 22px 0 0; color: rgba(255, 255, 255, 0.55); }
.foot a { color: rgba(255, 255, 255, 0.78); text-decoration: underline; text-underline-offset: 2px; }
.foot a:hover { color: #fff; }


/* ---------- 13. RESPONSIVE ----------------------------------------------
   Three steps: 1000px stacks the wide grids, 940px collapses the navigation
   into the menu button, 720px goes to a single column.                    */

/* Tablet */
@media (max-width: 1000px) {
  :root { --sec-pad: 76px; --gutter: 24px; }

  .hero-grid, .reg-grid { grid-template-columns: 1fr; gap: 44px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  h2.display { max-width: 24ch; }
}

/* Collapsed navigation.
   This breakpoint is deliberately WIDER than the mobile one below. Laid out
   on a single line the logo, four links and the button need about 895px, so
   anything narrower must use the menu button instead - otherwise the links
   wrap onto two lines (iPad portrait at 768px sat in that gap).
   NOTE: main.js matches this same 940px value. Change both together. */
@media (max-width: 940px) {
  .nav-toggle { display: block; }

  /* Slightly smaller logo so it sits comfortably beside the menu button */
  .brand-logo { height: 28px; }

  /* Collapsed menu: hidden until the toggle button opens it */
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-lift);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block; padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .nav-cta { margin-top: 16px; }
}

/* Mobile */
@media (max-width: 720px) {
  :root { --sec-pad: 60px; --gutter: 20px; }

  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid { gap: 16px; margin-top: 34px; }

  .field-row { grid-template-columns: 1fr; gap: 0; }

  .hero { padding-block: 52px 64px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .notice { padding: 22px 20px; }
  .callout { padding: 18px 18px; }
  .form-card { padding: 22px 20px; }

  .foot-about { font-size: 13.5px; }
}