/* ==========================================================================
   Relief, getreliefapp.com
   Built on the Relief visual identity V4. Gradient stops, black and white are
   taken from the identity PDF shading dictionaries, not eyedropped.
   Every asset is served from this site. No third party requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts

   Fraunces is self hosted. Helvetica is the identity's body face; it is not
   licensable as a webfont, so it is called from the system where it exists
   (every Mac and iPhone, which is most of this audience) and falls back to
   Arial, which shares its metrics, everywhere else.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin.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;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Identity, exact */
  --grad-a: #f292ed;
  --grad-b: #f36364;
  --brand-gradient: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
  --ink: #141414;
  --paper: #ffffff;

  /* Neutrals derived from the identity black, so nothing drifts off brand */
  --ground: #ffffff;
  --surface: #ffffff;
  --ink-soft: #3d3a3d;
  --muted: #6d686d;
  --rule: #e6e2e6;
  --rule-soft: #f2eff2;
  --field: #ffffff;

  --alert: #c8342f;
  --ok: #1f7a52;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 34rem;

  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;

  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141414;
    --surface: #1c1a1c;
    --ink: #ffffff;
    --ink-soft: #e4e0e4;
    --muted: #9c959c;
    --rule: #2e2b2e;
    --rule-soft: #232023;
    --field: #1c1a1c;
    --alert: #ff8b86;
    --ok: #6ecfa2;
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { 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: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--grad-b);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 10;
  background: var(--paper);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 8px;
}

.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;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.section {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   5. Type roles
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.018em;
}

/* Fraunces is variable. Pushing the optical size axis up at display sizes gives
   the headline the sharper, higher contrast cut the identity uses. */
h1 {
  font-size: clamp(2.35rem, 8.6vw, 3.9rem);
  font-variation-settings: "opsz" 144, "SOFT" 20;
}
h2 {
  font-size: clamp(1.7rem, 5.4vw, 2.3rem);
  font-variation-settings: "opsz" 72;
}
h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0; max-width: var(--measure); }

.lede {
  font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.small { font-size: 0.9375rem; color: var(--muted); }
.tiny  { font-size: 0.8125rem; color: var(--muted); }
.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-head { border-bottom: 1px solid var(--rule); }

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.wordmark {
  display: block;
  line-height: 0;
}
.wordmark img { width: 108px; height: auto; display: block; }

.head-link {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. Hero. The identity cover, carried onto the web.
   -------------------------------------------------------------------------- */

/* The whole first screen is the brand. Nothing competes with it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-gradient);
  color: #ffffff;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 10vw, 5rem);
}

/* Depth. The flat left to right wash is the brand base; these soft radial
   washes, in the same two hues, stop it reading as a dead colour fill. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(255, 255, 255, 0.42), transparent 62%),
    radial-gradient(55% 50% at 88% 96%, rgba(196, 74, 138, 0.34), transparent 66%),
    radial-gradient(45% 40% at 96% 6%, rgba(255, 190, 150, 0.30), transparent 68%);
  pointer-events: none;
}

/* A soft edge into the section below, rather than a hard colour cut. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16));
  pointer-events: none;
}

.hero .wrap { display: flex; flex-direction: column; gap: var(--sp-5); }

.hero-mark {
  width: min(340px, 74vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(120, 30, 70, 0.16));
}

.hero h1 { color: #ffffff; max-width: 18ch; }

.hero .lede {
  color: #ffffff;
  opacity: 0.94;
}

/* The waitlist form sits inside the hero, on the gradient. */
.hero .waitlist { margin-top: var(--sp-1); }

.hero .field-row input {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
  color: #141414;
}
.hero .field-row input::placeholder { color: #6d686d; }

.hero .btn {
  background: #ffffff;
  color: #141414;
}
.hero .btn:hover { background: rgba(255, 255, 255, 0.88); }
.hero .btn[disabled] { opacity: 0.6; }

.hero .form-note { color: #ffffff; opacity: 0.9; }
.hero .form-note[data-state="success"] { color: #ffffff; font-weight: 700; opacity: 1; }
.hero .form-note[data-state="error"] { color: #ffffff; font-weight: 700; opacity: 1; }

/* --------------------------------------------------------------------------
   8. Waitlist form
   -------------------------------------------------------------------------- */

.waitlist { width: 100%; }

.form-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 30rem;
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field-row input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
}

.btn {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand-gradient);
  color: #ffffff;
}
.btn:hover { filter: brightness(1.05); }
.btn[disabled] { cursor: default; filter: grayscale(0.3); opacity: 0.7; }

.form-note { font-size: 0.875rem; color: var(--muted); }
.form-note[data-state="success"] { color: var(--ok); font-weight: 700; }
.form-note[data-state="error"] { color: var(--alert); font-weight: 700; }

@media (min-width: 34rem) {
  .field-row { flex-direction: row; align-items: center; }
  .btn { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   9. Definition rows
   -------------------------------------------------------------------------- */

.rows { margin: var(--sp-2) 0 0; }

.rows > div {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rows > div:last-child { border-bottom: 1px solid var(--rule); }

.rows dt {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  position: relative;
  padding-left: 1.4rem;
}

/* A short gradient dash instead of a bullet, so the brand shows up in the
   small stuff and not only in the hero. */
.rows dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gradient);
}

.rows dd {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   10. Dark band

   Gives the page a rhythm: gradient, then paper, then black. It also suits the
   content, since this is the section about protecting health data.
   -------------------------------------------------------------------------- */

.band-dark {
  background: var(--ink);
  color: #ffffff;
  padding-block: var(--sp-7);
  border: 0;
}

.band-dark h2 { color: #ffffff; }
.band-dark .small { color: rgba(255, 255, 255, 0.66); }
.band-dark .rows > div { border-color: rgba(255, 255, 255, 0.14); }
.band-dark .rows dd { color: rgba(255, 255, 255, 0.66); }

@media (prefers-color-scheme: dark) {
  .band-dark { background: #000000; }
}

/* --------------------------------------------------------------------------
   11. Medical disclaimer
   -------------------------------------------------------------------------- */

.disclaimer {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: rgba(255, 255, 255, 0.045);
  margin-top: var(--sp-6);
}

.disclaimer .eyebrow { color: var(--grad-a); }

.disclaimer p {
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.disclaimer strong { color: #ffffff; }

/* --------------------------------------------------------------------------
   11. Prose, for the legal and support pages
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { margin-bottom: var(--sp-3); }
.page-head .lede { margin-bottom: var(--sp-2); }

.prose {
  padding-block: var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.prose section { display: flex; flex-direction: column; gap: var(--sp-3); }

.prose h2 {
  font-size: 1.3rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.prose h2 .num {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--grad-b);
  letter-spacing: 0.04em;
}

.prose p,
.prose li { font-size: 0.9375rem; line-height: 1.7; }

.prose ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }

.prose ul li { position: relative; padding-left: 1.1rem; max-width: var(--measure); }

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grad-b);
}

.prose .address {
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-foot {
  background: var(--ink);
  color: #ffffff;
  padding-block: var(--sp-6);
  margin-top: var(--sp-6);
}

.site-foot .wrap { display: flex; flex-direction: column; gap: var(--sp-4); }

.foot-mark { width: 96px; height: auto; display: block; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.foot-links a {
  font-size: 0.9375rem;
  color: #ffffff;
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 1px;
}
.foot-links a:hover { opacity: 1; }
.foot-links a[aria-current="page"] { opacity: 1; border-bottom-color: var(--grad-a); }

.foot-meta {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-width: var(--measure);
}

@media (prefers-color-scheme: dark) {
  .site-foot { background: #000000; }
}

/* --------------------------------------------------------------------------
   14. Motion. One restrained reveal on load, on the hero only.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-mark,
  .hero h1,
  .hero .lede,
  .hero .waitlist {
    animation: rise 700ms cubic-bezier(0.22, 0.68, 0.3, 1) both;
  }
  .hero h1        { animation-delay: 80ms; }
  .hero .lede     { animation-delay: 150ms; }
  .hero .waitlist { animation-delay: 220ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15. Wider screens. The page is written mobile first; this is the only place
   the layout changes shape.
   -------------------------------------------------------------------------- */

@media (min-width: 46rem) {
  .hero { padding-block: 7rem 7.5rem; }
  .hero .wrap { max-width: 46rem; }

  /* Two up, so the two lists stop being one long column on a laptop. */
  .rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-5);
  }
  .rows > div:nth-child(2) { border-top: 1px solid var(--rule); }
  .rows > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .band-dark .rows > div:nth-child(2) { border-color: rgba(255, 255, 255, 0.14); }
}

/* The footer now sits directly under the dark band, so it needs a hairline
   rather than a gap, otherwise the two blacks merge into one slab. */
.site-foot--after-dark {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   16. Hero composition

   Bigger, calmer, and it owns the first screen. The old version tried to fit
   the logo, a headline, a paragraph and the form into a short band, so nothing
   in it had any weight.
   -------------------------------------------------------------------------- */

.hero .wrap { gap: clamp(1.5rem, 4vw, 2.25rem); }

.hero-mark { width: min(420px, 82vw); }

.hero h1 {
  font-size: clamp(2.6rem, 10.5vw, 4.6rem);
  max-width: 15ch;
  line-height: 1.02;
}

.hero-sub {
  font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  line-height: 1.5;
  color: #ffffff;
  opacity: 0.92;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   17. The statement. One sentence, set large, doing the job a paragraph of
   small grey text was failing to do.
   -------------------------------------------------------------------------- */

.statement {
  background: var(--ink);
  color: #ffffff;
  padding-block: clamp(4.5rem, 14vw, 8rem);
}

.statement p {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 120;
  font-size: clamp(1.75rem, 6.4vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}

/* The brand carried into the type itself, on the words that matter. */
.grad-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.statement .foot-note {
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: var(--measure);
}

@media (prefers-color-scheme: dark) {
  .statement { background: #000000; }
}

/* --------------------------------------------------------------------------
   18. Disclaimer, back on a light ground

   The statement section now carries the black, so this sits on paper again.
   These rules come last on purpose and override section 11.
   -------------------------------------------------------------------------- */

.disclaimer {
  border: 1px solid var(--rule);
  background: var(--rule-soft);
}
.disclaimer .eyebrow { color: var(--muted); }
.disclaimer p { color: var(--ink-soft); }
.disclaimer strong { color: var(--ink); }

/* ==========================================================================
   19. The cycle

   The page is no longer a stack of coloured rectangles with text in them.
   It walks you through one cycle. A gradient thread runs down the page and
   each moment hangs off it, which is the one structural idea here and it is
   taken from the product rather than from a landing page template.
   ========================================================================== */

.cycle { padding-block: clamp(4.5rem, 13vw, 8rem); }

.cycle-intro {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.5rem, 5.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: clamp(2.5rem, 8vw, 4rem);
  text-wrap: balance;
}

.track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  padding-left: clamp(2.25rem, 8vw, 3.25rem);
}

/* The thread itself. */
.track::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6em;
  bottom: 0.6em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--grad-a), var(--grad-b));
}

.moment { position: relative; padding-bottom: clamp(3rem, 9vw, 4.75rem); }
.moment:last-child { padding-bottom: 0; }

/* The marker for each moment, punched out of the thread. */
.moment::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(2.25rem, 8vw, 3.25rem) + 0px);
  top: 0.42em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--grad-b);
  box-shadow: 0 0 0 5px var(--ground);
}

.moment .day {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.moment h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  max-width: 22ch;
  text-wrap: balance;
}

.moment p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   20. The quiet block. Everything that is true but does not need a whole
   section of its own.
   -------------------------------------------------------------------------- */

.also { padding-block: clamp(3.5rem, 10vw, 5.5rem); border-top: 1px solid var(--rule); }

.also-grid {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.also-grid h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.also-grid p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }

@media (min-width: 46rem) {
  .also-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .moment h3 { font-size: 2.1rem; }
}