/* Simple Health — hellosimplehealth.com
   Refined warm minimalism. Rounded type, off-white paper, solid fills (no
   gradients), no dividers, no footer. Motion is small, earned, reduce-motion safe. */

:root {
  color-scheme: light;

  --paper: #faf9f7;
  --paper-tint: #f2f0ea;       /* recessed surfaces, used sparingly */
  --ink: #1d1b19;              /* warm near-black */
  --ink-2: #645d54;            /* muted */
  --ink-3: #a59d92;            /* faint / placeholder */
  --hair: rgba(29,27,25,.10);  /* the only borders: inputs, not dividers */

  --accent: #ec5a4d;           /* warm coral, from the icon heart */
  --accent-ink: #c8392c;

  /* icon spectrum — tiny accents only */
  --c-heart:#ef5350; --c-lungs:#1fa597; --c-pulse:#34c0dd; --c-leaf:#82bd3f;
  --c-flame:#ef8a3c; --c-brain:#a872d6; --c-sun:#f6bf2b; --c-carrot:#ec4a96;
  --c-lift:#3a6fd4; --c-bed:#5b5fd4; --c-steps:#56b58c;

  --display: "Fredoka", -apple-system, system-ui, sans-serif;
  --body: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  --shadow-card: 0 1px 2px rgba(29,27,25,.04), 0 12px 30px -16px rgba(29,27,25,.18);
  --shadow-device: 0 40px 80px -30px rgba(29,27,25,.34);
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.3,1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: #fbd9c9; color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1.6rem; }

/* ---------- Header (no footer anywhere; legal links live here) ---------- */
.head { padding: 1.5rem 0 0; }
.head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand .tile {
  width: 36px; height: 36px; border-radius: 26%; background: #fff; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-out);
}
.brand:hover .tile { transform: rotate(-4deg) scale(1.05); }
.brand .name { font-family: var(--display); font-weight: 500; font-size: 1.18rem; letter-spacing: .1px; }
.head-links { display: flex; gap: 1.3rem; font-size: .92rem; color: var(--ink-2); }
.head-links a { position: relative; }
.head-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px;
  background: var(--ink); border-radius: 2px; transition: right .3s var(--ease);
}
.head-links a:hover { color: var(--ink); }
.head-links a:hover::after { right: 0; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

h1.headline {
  font-family: var(--display);
  font-weight: 520;
  font-size: clamp(2.7rem, 6.2vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -.018em;
  margin-bottom: 1.2rem;
}
h1.headline .accent { color: var(--accent); }

.lead {
  font-size: 1.18rem; line-height: 1.55; color: var(--ink-2);
  max-width: 31rem; margin-bottom: 2.1rem;
}

/* ---------- Coming soon (interim: beta invitations closed, App Store release pending) ---------- */
.coming { max-width: 30rem; }
.coming-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 500; font-size: 1.02rem;
  color: var(--ink); background: #fff; border-radius: 999px;
  padding: .62rem 1.15rem; box-shadow: var(--shadow-card);
}
.coming-pill .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
.coming-note { margin-top: .9rem; font-size: .92rem; color: var(--ink-2); padding-left: .2rem; }

/* ---------- Early-access form (retired with the beta; kept for reference) ---------- */
.signup { max-width: 30rem; }
.signup .form-row {
  display: flex; gap: .5rem;
  background: #fff;
  padding: .42rem .42rem .42rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.signup .form-row:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-card), 0 0 0 4px rgba(236,90,77,.12);
}
.signup input[type=email] {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--body); font-size: 1.02rem; color: var(--ink); min-width: 0;
}
.signup input::placeholder { color: var(--ink-3); }
.signup button {
  flex: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 500; font-size: 1rem;
  color: var(--paper); background: var(--ink);
  padding: 0 1.3rem; height: 48px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.signup button:hover { transform: translateY(-1px); background: #000; }
.signup button:active { transform: translateY(0) scale(.98); }
.signup button .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(250,249,247,.4); border-top-color: var(--paper);
  animation: spin .7s linear infinite; display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.signup .note { margin-top: .8rem; font-size: .86rem; color: var(--ink-3); padding-left: 1.1rem; }
.signup .legal-note { margin-top: .5rem; font-size: .8rem; color: var(--ink-2); padding-left: 1.1rem; }
.signup .legal-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* form states */
.signup[data-state=loading] button .label { display: none; }
.signup[data-state=loading] button .spinner { display: block; }
.signup[data-state=success] .form-row { border-color: var(--c-lungs); }
.signup[data-state=success] .form-row .field,
.signup[data-state=success] .form-row button { display: none; }
.signup .success {
  display: none; align-items: center; gap: .6rem;
  padding: .55rem .4rem .55rem .3rem; color: var(--ink); font-weight: 500;
}
.signup[data-state=success] .success { display: flex; }
.signup[data-state=success] .note { color: var(--c-lungs); }
.signup .check {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--c-lungs);
  display: grid; place-items: center;
}
.signup .check svg { width: 15px; height: 15px; }
.signup .check path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw .45s var(--ease-out) .05s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.signup[data-state=error] .note { color: var(--accent-ink); }
.field { display: flex; flex: 1; gap: .5rem; min-width: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* honeypot */

/* ---------- Device cluster: main phone (front) + widgets phone (behind-left) + watch (front-right) ---------- */
/* The watch sits low-right, leaving the dominant phone visually airy on its upper
   right. Shifting all three devices right together (relative positions unchanged, so
   the watch stays attached) balances the phone mass against the text. The shift is
   FLUID: zero until the viewport is wide enough to have outer margins that can absorb
   it (below that the wrap fills the viewport, so any shift would overflow and re-break
   centering), then it ramps to a small cap. Auto-zeroes on mobile via the clamp floor. */
.cluster {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto; justify-self: center;
  --dev-shift: clamp(0px, (100vw - 1200px) * 0.5, 105px);
}
.cluster .dev { position: absolute; }
.cluster .main {
  position: relative; display: block; margin: 0 auto; left: var(--dev-shift);
  width: 53%; z-index: 3;
  filter: drop-shadow(0 28px 46px rgba(29,27,25,.28));
}
/* `bottom` offsets compensate for each PNG's transparent bottom padding so the
   VISIBLE devices share one baseline (the image boxes all sit at bottom: 0). */
.cluster .widgets {
  width: 49%; left: var(--dev-shift); bottom: 1%; z-index: 1;
  filter: drop-shadow(0 24px 42px rgba(29,27,25,.18));
}
.cluster .watch {
  width: 33%; left: calc(57% + var(--dev-shift)); bottom: 8.7%; z-index: 4;
  filter: drop-shadow(0 16px 26px rgba(29,27,25,.32));
}

/* ---------- Entrance ---------- */
.r { opacity: 0; transform: translateY(16px); }
.is-in .r { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.is-in .r.d1 { transition-delay: .05s; }
.is-in .r.d2 { transition-delay: .13s; }
.is-in .r.d3 { transition-delay: .21s; }
.is-in .r.d4 { transition-delay: .29s; }
.is-in .r.d5 { transition-delay: .37s; }
.cluster.r { transform: translateY(26px) scale(.98); }
.is-in .cluster.r { transform: none; transition: opacity .9s ease, transform 1s var(--ease-out); transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r, .is-in .r, .cluster.r, .is-in .cluster.r { opacity: 1; transform: none; transition: none; }
  .cluster .dev { animation: none; }
  * { scroll-behavior: auto; }
}

/* ---------- Legal long-form ---------- */
.legal { padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; }
.legal .wrap { max-width: 46rem; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); font-size: .92rem; margin-bottom: 1.6rem; }
.back-link:hover { color: var(--ink); }
.back-link svg { transition: transform .25s var(--ease); }
.back-link:hover svg { transform: translateX(-3px); }
.legal h1 { font-family: var(--display); font-weight: 560; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: .3rem; }
.legal .meta { color: var(--ink-3); font-size: .92rem; margin-bottom: 2.4rem; }
.legal h2 { font-family: var(--display); font-weight: 500; font-size: 1.42rem; margin: 2.6rem 0 .6rem; letter-spacing: -.01em; }
.legal h3 { font-weight: 700; font-size: 1.06rem; margin: 1.7rem 0 .4rem; color: var(--ink); }
.legal p, .legal li { color: #4a443c; line-height: 1.62; }
.legal a { color: var(--accent-ink); text-underline-offset: 2px; }
.legal ul, .legal ol { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }
.legal strong { color: var(--ink); }
.legal code { background: var(--paper-tint); padding: .1em .4em; border-radius: 6px; font-size: .9em; }
.legal blockquote.summary { background: var(--paper-tint); border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.6rem 0; }
.legal blockquote.summary p { margin: 0; }
.legal table { border-collapse: collapse; width: 100%; font-size: .94rem; margin: 1.1rem 0; }
.legal th, .legal td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.legal th { color: var(--ink-2); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .signup { margin-left: auto; margin-right: auto; }
  .lead { margin-left: auto; margin-right: auto; }
  .signup { width: 100%; }
  /* The trio's visible mass leans left within the cluster box (widgets at the left
     edge, the watch stops short of the right), so a centered cluster reads as
     right-heavy. Nudge the whole trio right by half that gap so it sits centered
     under the stacked text. (Relative offsets preserved → the watch stays attached.) */
  .cluster { order: -1; max-width: 400px; --dev-shift: 5.8%; }
}
@media (max-width: 460px) {
  .signup .form-row { flex-wrap: wrap; border-radius: 22px; padding: .6rem; }
  .signup input[type=email] { padding: .4rem .6rem; width: 100%; }
  .signup button { width: 100%; justify-content: center; height: 46px; }
  .field { flex-wrap: wrap; }
}

/* ---------- Big screens: larger device cluster, shifted toward the right ---------- */
@media (min-width: 1500px) {
  .wrap { max-width: 80rem; }
  .hero .wrap { grid-template-columns: 1fr 1.1fr; }
  .cluster { max-width: 640px; justify-self: center; }
}