/* Inter, self-hosted (SIL Open Font License 1.1 -- see /fonts/OFL.txt).
   Served from our own origin because the CSP sets font-src 'self'.

   Both files are the variable font (wght axis 100-900), so each face declares
   the full range. Pinning single weights would cap the family at the heaviest
   face declared, and :root sets font-synthesis: none, so anything above it
   would silently render lighter than authored. */

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --navy: #14243d;
  --navy-accent: #1b3a6b;
  --navy-accent-strong: #16305a;
  --teal: #0b7c74;
  --teal-bright: #2cc3b6;
  --surface: #ffffff;
  --surface-alt: #f1f3f7;
  --muted: #5b6272;
  --muted-soft: #8a8c93;
  --line: #e3e6ec;
  --danger: #b3261e;
  --ring: rgba(27, 58, 107, 0.1);
  --shadow-soft: 0 12px 28px rgba(20, 36, 61, 0.07);
  --shadow-lift: 0 16px 40px rgba(20, 36, 61, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--surface);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--navy);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

.shell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(44, 195, 182, 0.08), transparent 26rem),
    linear-gradient(to bottom, var(--surface-alt), var(--surface) 34%);
}

.atmosphere {
  display: none;
}

.masthead,
.hero,
footer {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), 72rem);
  margin-inline: auto;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 2rem;
}

.brand {
  color: var(--navy-accent);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 0.25rem rgba(44, 195, 182, 0.14);
}

.hero {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: calc(100svh - 11rem);
  padding-block: 3rem 5rem;
  text-align: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 42rem;
  padding-block: 2rem;
}

.eyebrow {
  margin: 0 0 1.6rem;
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.9rem, 6vw, 5.2rem);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.intro {
  max-width: 34rem;
  margin: 1.8rem 0 2.6rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.65;
}

.waitlist-form {
  width: 100%;
  max-width: 33rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.waitlist-form > label:first-child {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-alt);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field-row:focus-within {
  border-color: var(--navy-accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.field-row input {
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
}

.field-row input::placeholder {
  color: var(--muted-soft);
}

.field-row button,
.social-button {
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 160ms ease, background 180ms ease, opacity 160ms ease;
}

.field-row button {
  padding: 0.85rem 1.35rem;
  color: #ffffff;
  background: var(--navy-accent);
  font-size: 0.82rem;
  font-weight: 720;
}

.field-row button:hover,
.field-row button:focus-visible {
  background: var(--navy-accent-strong);
}

.field-row button:hover,
.field-row button:focus-visible,
.social-button:hover,
.social-button:focus-visible {
  transform: translateY(-1px);
}

.field-row button:disabled,
.social-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.consent input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0.08rem 0 0;
  accent-color: var(--navy-accent);
}

.turnstile {
  min-height: 0;
  margin-top: 0.8rem;
}

.form-message {
  min-height: 1.2rem;
  margin: 0.7rem 0 0;
  color: var(--danger);
  font-size: 0.76rem;
}

.form-message.success {
  color: var(--teal);
}

.social-section {
  width: 100%;
  max-width: 33rem;
  margin-top: 1.25rem;
  text-align: left;
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted-soft);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.divider::before,
.divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: var(--line);
}

.social-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.7rem;
  padding: 0.65rem 0.7rem;
  border-color: var(--line);
  color: var(--navy);
  background: var(--surface);
  font-size: 0.76rem;
  font-weight: 620;
  text-decoration: none;
}

.social-button:hover,
.social-button:focus-visible {
  background: var(--surface-alt);
}

.provider-mark {
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--navy-accent);
  font-size: 0.61rem;
  font-weight: 800;
}

.social-note {
  margin: 0.7rem 0 0;
  color: var(--muted-soft);
  font-size: 0.66rem;
  line-height: 1.45;
}

.visual {
  display: none;
}

.visual-wash {
  display: none;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.3rem 1.7rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
}

footer p {
  margin: 0;
}

footer nav {
  display: flex;
  gap: 1.25rem;
}

footer a {
  text-underline-offset: 0.22rem;
}

.legal-page {
  min-height: 100svh;
  color: var(--navy);
  background: var(--surface);
}

.legal-wrap {
  width: min(calc(100% - 3rem), 46rem);
  margin-inline: auto;
  padding-block: 3rem 6rem;
}

.legal-page .brand {
  color: var(--navy-accent);
}

.legal-content {
  margin-top: 7rem;
}

.legal-content h1 {
  max-width: none;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1;
}

.legal-content h2 {
  margin: 2.6rem 0 0.7rem;
  font-size: 1.05rem;
  color: var(--navy);
}

.legal-content h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--navy);
  text-transform: none;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
  line-height: 1.7;
}

.legal-content ul,
.legal-content ol {
  padding-left: 1.3rem;
  margin: 0.4rem 0 0.9rem;
}

.legal-content li + li {
  margin-top: 0.35rem;
}

.legal-content strong {
  color: var(--navy);
}

.legal-content a {
  color: var(--teal);
}

.legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
  background: rgba(11, 124, 116, 0.08);
  border-radius: 3px;
}

.legal-table {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.legal-table th,
.legal-table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.5;
}

.legal-table th {
  font-weight: 600;
  color: var(--navy);
  border-bottom-width: 2px;
}

@media (max-width: 850px) {
  .masthead,
  .hero,
  footer {
    width: min(calc(100% - 2rem), 42rem);
  }

  .status {
    font-size: 0.58rem;
  }

  .hero {
    min-height: auto;
    padding-block: 4rem 5rem;
  }
}

@media (max-width: 560px) {
  .masthead {
    padding-block: 1.4rem;
  }

  .hero {
    padding-block: 3rem 4rem;
  }

  h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .intro {
    margin-top: 1.5rem;
  }

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

  .field-row button {
    width: 100%;
  }

  .social-buttons {
    grid-template-columns: 1fr;
  }

  footer {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ *
 * home (front page)
 *
 * Ported from ../treat-proto-flow/public/index.html:31-110 (the "gate"
 * screen). That prototype expresses everything as inline style="..." plus
 * style-hover="..." attributes resolved by its own runtime; our CSP sets
 * style-src 'self', so the same declarations live here as classes instead.
 * Values are copied verbatim -- resist tidying them.
 *
 * Everything is scoped under .home so /joined/ and the legal pages, which
 * share this stylesheet, are untouched.
 * ------------------------------------------------------------------ */

.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #233346;
  background: #ffffff;
}

.home a {
  text-decoration: none;
}

/* The proto's container idiom: 1280px max content width, 20px minimum
   gutter, fluid in between. Repeated on every band. */
.home .band {
  padding-inline: max(clamp(20px, 4.4vw, 56px), calc((100% - 1280px) / 2));
}

/* header */

.home .gate-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: clamp(62px, calc(56px + 1.3vw), 78px);
  row-gap: 14px;
}

.home .gate-wordmark {
  margin-left: -1px;
  color: #14243d;
  font-size: clamp(20px, calc(18px + 0.55vw), 27px);
  font-weight: 500;
  letter-spacing: -0.032em;
}

.home .gate-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.home .gate-nav a {
  margin: -7px -11px;
  padding: 7px 11px;
  border-radius: 9px;
  color: #1b3a6b;
  font-size: 14px;
  transition: background 160ms ease, color 160ms ease;
}

.home .gate-nav a:hover,
.home .gate-nav a:focus-visible {
  color: #14243d;
  background: #f1f3f7;
}

/* hero */

.home .gate-hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 56px 40px;
  padding-block: clamp(56px, 6.4vw, 88px) max(128px, calc(216px - 7vw));
}

.home .gate-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home .gate-glow::before {
  position: absolute;
  left: 44%;
  top: -280px;
  width: 760px;
  height: 620px;
  content: "";
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(44, 195, 182, 0.13) 0%,
    rgba(27, 58, 107, 0.06) 46%,
    rgba(255, 255, 255, 0) 76%
  );
}

.home .gate-hero-copy {
  position: relative;
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Proto uses 668px; trimmed here so the headline's last lines break more
     evenly -- our static Inter runs a hair wider than the proto's variable one. */
  max-width: 640px;
}

.home .gate-title {
  margin: 0;
  color: #14243d;
  font-size: clamp(30px, 3.5vw, 45px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: pretty;
}

.home .gate-title-soft {
  color: #8a8c93;
}

.home .gate-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.home .gate-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.home .pill {
  display: inline-block;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.home .pill-primary {
  padding: 13px 26px;
  color: #ffffff;
  background: #1b3a6b;
  transition: background 180ms ease;
}

.home .pill-primary:hover,
.home .pill-primary:focus-visible {
  --ax: 3px;
  background: #16305a;
}

/* No transition here: the proto's secondary pill has none, so it snaps. */
.home .pill-secondary {
  padding: 12px 24px;
  border: 1px solid #c6ccdd;
  color: #14243d;
  background: #ffffff;
}

.home .pill-secondary:hover,
.home .pill-secondary:focus-visible {
  --ax: 3px;
  border-color: #1b3a6b;
  background: #f5f7fc;
}

.home .pill-arrow {
  display: inline-block;
  transform: translateX(var(--ax, 0px));
  transition: transform 180ms ease;
}

/* hero visual: phone mock on a white backing plate, faded out at the base */

.home .gate-visual {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  margin: 0 auto calc(-1 * max(64px, calc(152px - 7vw))) auto;
}

/* The proto top-aligns the mock while centring the copy, so their spacing
   depends on the hero's height -- which changed when its demo shortcut bar was
   dropped. Centring the mock too locks the pair to each other at any viewport
   height. Dropping the negative bottom margin (the proto's bleed into the next
   band) keeps the fade inside the hero and centres the visible box rather than
   the margin box. Only applies while the hero is side-by-side, not once it
   wraps -- the bleed and top alignment stay in the stacked layout. */
@media (min-width: 820px) {
  .home .gate-visual {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Align the mock's right edge to the ECG's tall spike. The spike sits at
   x=542 of viewBox "110 0 538 220", i.e. 0.197 of the SVG width in from its
   right edge, and that edge is the container's right edge. With width driven
   by height * 538/220, the spike is 0.482 * height in -- reusing the ECG's own
   height clamp keeps them aligned as it scales. Held back to widths where the
   hero has spare space, so the copy is never squeezed to make room. */
@media (min-width: 1200px) {
  .home .gate-visual {
    margin-left: auto;
    margin-right: calc(clamp(100px, 11.5vw, 158px) * 0.482);
  }
}

.home .gate-visual::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 55%;
  content: "";
  border-radius: 26px;
  background: #ffffff;
  box-shadow:
    0 1px 4px rgba(20, 36, 61, 0.07),
    0 8px 20px rgba(20, 36, 61, 0.09),
    0 20px 44px rgba(20, 36, 61, 0.1);
}

.home .gate-mock {
  position: relative;
  display: block;
  width: clamp(300px, max(25vw, 1120px - 92vw), 390px);
  max-width: 100%;
  height: auto;
  border-radius: 26px;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 62%,
    rgba(0, 0, 0, 0.5) 78%,
    rgba(0, 0, 0, 0) 92%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 62%,
    rgba(0, 0, 0, 0.5) 78%,
    rgba(0, 0, 0, 0) 92%
  );
}

/* ECG trace running off the right edge, ending in a breathing dot */

.home .gate-ecg {
  position: absolute;
  right: max(clamp(20px, 4.4vw, 56px), calc((100% - 1280px) / 2));
  bottom: calc(-0.464 * clamp(100px, 11.5vw, 158px));
  pointer-events: none;
}

.home .gate-ecg-rule {
  position: absolute;
  right: 100%;
  top: 53.6%;
  width: 100vw;
  height: 1px;
  background: #ebedf1;
}

.home .gate-ecg-svg {
  display: block;
  width: auto;
  height: clamp(100px, 11.5vw, 158px);
}

.home .gate-pulse {
  position: absolute;
  right: 0;
  top: 53.6%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 0;
  border-radius: 50%;
  background: #2cc3b6;
  animation: treat-breathe 2.8s ease-in-out infinite;
}

.home .gate-pulse > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(44, 195, 182, 0.45);
  animation: treat-halo 2.8s ease-out infinite;
}

@keyframes treat-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

@keyframes treat-halo {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* credibility */

.home .gate-credibility {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: 42px;
}

.home .gate-eyebrow {
  margin: 0;
  color: #6f7280;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home .gate-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}

.home .gate-logos img {
  display: block;
  width: auto;
  opacity: 0.9;
}

/* Per-logo heights and sub-pixel nudges: the source images have different
   internal padding, so these align the optical baseline. */
.home .logo-swappie {
  height: 22px;
}

.home .logo-meru {
  height: 15px;
  transform: translateY(-1.4px);
}

.home .logo-laatupaivystys {
  height: 30px;
  margin: 0 4px;
  transform: translateY(1px);
}

.home .logo-rokotepiste {
  height: 19px;
}

.home .logo-op {
  height: 27px;
}

.home .logo-mckinsey {
  height: 30px;
}

.home .logo-bcg {
  height: 20px;
  transform: translateY(-0.9px);
}

/* footer -- resets the shared bare `footer` rules above */

.home .gate-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: auto;
  margin-inline: 0;
  padding-block: 24px 26px;
  border-top: 1px solid #ebedf1;
  color: inherit;
  font-size: inherit;
}

.home .gate-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.home .gate-footer p {
  margin: 0;
  color: #78899c;
  font-size: 13px;
  line-height: 1.6;
}

.home .gate-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.home .gate-footer nav a {
  margin: -6px -10px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #1b3a6b;
  font-size: 13px;
  transition: background 160ms ease, color 160ms ease;
}

.home .gate-footer nav a:hover,
.home .gate-footer nav a:focus-visible {
  color: #14243d;
  background: #f1f3f7;
}

@media (prefers-reduced-motion: reduce) {
  .home .gate-pulse,
  .home .gate-pulse > span {
    animation: none;
  }
}