/* Kin site — tokens ported 1:1 from the iOS app (Theme.swift). The dawn
   palette and serif display are the app's locked identity, carried to the
   web, not a template default. unslop-ignore */
:root {
  --bg-top: #fff6ec;      /* unslop-ignore: app brand token */
  --bg-bottom: #fbe3cc;   /* unslop-ignore: app brand token */
  --ink: #2a2018;
  --dim: #6e5f4e;
  --card: #ffffff;
  --ember: #a85e2c;
  --spruce: #2f7e72;
  --rose: #b14a55;
  --ochre: #8a6b3d;

  /* One spacing scale, used everywhere. No ad-hoc margins. */
  --s1: 8px;
  --s2: 12px;
  --s3: 20px;
  --s4: 32px;
  --s5: 52px;
  --s6: 84px;
  --s7: 136px;

  --radius: 20px;
  --shadow: 0 10px 32px rgba(42, 32, 24, 0.07);
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif; /* unslop-ignore: matches app's SF Serif */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* Gradient on html so it spans the full document without
     background-attachment: fixed, which stutters on iOS Safari. */
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) no-repeat;
  background-size: 100% 100%;
  min-height: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Horizontal container only — never touches vertical rhythm, so it can
   sit on the same element as a section. */
.wrap { max-width: 1024px; margin-inline: auto; padding-inline: var(--s3); }

/* ---------- Type scale: 1.25 ratio, three display sizes, no in-betweens */
h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(2.5rem, 6.5vw, 3.8rem); line-height: 1.08;
  text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.65rem, 3.8vw, 2.3rem); line-height: 1.18;
  text-wrap: balance;
}
h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
p { max-width: 34em; }
.lede { font-size: 1.14rem; color: var(--dim); }
.dim { color: var(--dim); }
.small { font-size: 0.88rem; }

/* Consistent gap after any heading block */
h1 + p, h2 + p { margin-top: var(--s3); }
h3 + p { margin-top: var(--s1); }

/* ---------- Nav */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) 0;
}
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: 1.7rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
}
.nav-cta {
  font-size: 0.92rem; font-weight: 600; color: var(--bg-top);
  background: var(--ink); text-decoration: none;
  padding: 10px 20px; border-radius: 14px;
}

/* ---------- Sections: one rhythm for the whole page. One value at every
   width — the old desktop bump to 84px doubled to 168px of empty at each of
   eight section boundaries, which read as gaps, not air. */
section, header.hero { padding-block: var(--s5); }
.section-head { margin-bottom: var(--s4); }

/* ---------- Chips (rep types) */
.chip {
  display: inline-block; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.13em; color: #fff; border-radius: 999px; /* unslop-ignore: the app's own capsule chip shape (Theme.swift), not a default */
  padding: 5px 14px; text-transform: uppercase;
}
.chip.ember { background: var(--ember); }
.chip.spruce { background: var(--spruce); }
.chip.rose { background: var(--rose); }
.chip.ochre { background: var(--ochre); }

/* ---------- Cards */
.card {
  background: var(--card); border-radius: var(--radius);
  padding: var(--s4); box-shadow: var(--shadow);
}
.card .chip + p { margin-top: var(--s2); }
.card-grid { display: grid; gap: var(--s3); }
.card-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Evidence card, same motif as the app's onboarding */
.evidence {
  border-left: 3px solid var(--ember);
  max-width: 620px;
  padding: var(--s4);
}
.evidence .stat {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.evidence .big {
  font-family: var(--serif); font-weight: 700; font-size: 3.8rem;
  color: var(--ember); line-height: 1;
}
.evidence .stat-label {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  white-space: nowrap;
}
.evidence p { margin-top: var(--s2); }
.evidence .cite {
  margin-top: var(--s2); font-size: 0.85rem; font-weight: 600;
  color: var(--ember);
}

/* ---------- Feature rows */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  align-items: center; padding-block: var(--s2);
}
.feature .num {
  font-family: var(--serif); font-size: 0.95rem; color: var(--dim);
  letter-spacing: 0.08em;
}
.feature .num + h2 { margin-top: var(--s1); }
.feature h2 + p { margin-top: var(--s2); }
.feature p { color: var(--dim); }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: var(--s4); }
  /* Text before image on mobile, whatever the desktop order */
  .feature .phone-slot { order: 2; }
  .feature .copy { order: 1; }
}

/* ---------- Phone frame */
.phone {
  width: min(300px, 78vw); margin: 0 auto; display: block;
  border-radius: 44px; border: 10px solid var(--ink);
  box-shadow: 0 24px 60px rgba(42, 32, 24, 0.2);
}
/* Inside a feature row the phone drops to 260px: at 300 every row ran 693px
   tall and left ~430px of dead air beside a 200px copy block, five times
   over. Scaled down, not cropped — a height cap with object-fit sliced
   screenshots mid-button. The hero phone keeps full size; the h1 beside it
   fills that row. */
.feature .phone { width: min(260px, 74vw); }
.hero .phone { width: min(300px, 78vw); }

/* ---------- Sample rep callout */
.sample {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: var(--s5) var(--s4);
}
.sample .rep {
  font-family: var(--serif); font-size: 1.65rem; font-weight: 600;
  line-height: 1.3; margin-top: var(--s3);
}
.sample .rep + p { margin: var(--s2) auto 0; }

/* ---------- Pricing. Two cards, one decision: Hearth is the one being
   sold, so it carries the keyline and the trial chip; Free states its own
   price plainly so the two cards share a baseline instead of Free looking
   like a stub. Plan names are set in the serif because they are names. */
.plans {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  max-width: 880px; margin-inline: auto;
}
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plans .card { padding: var(--s4) var(--s4) var(--s4); }
.plans h3 {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.plans .card.featured {
  border: 1.5px solid var(--ember);
  position: relative;
}
.trial-chip {
  position: absolute; top: -12px; right: 20px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; background: var(--ember);
  padding: 4px 12px; border-radius: 999px; /* unslop-ignore: matches the app's capsule chips */
}
.plans ul { list-style: none; margin-top: var(--s3); }
.plans li {
  padding: 8px 0 8px 26px; position: relative; color: var(--dim);
  font-size: 0.97rem; line-height: 1.5;
}
.plans li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--spruce);
}
.price {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 700;
  margin-top: var(--s2); line-height: 1.1;
}
.price .per { font-size: 1rem; font-weight: 600; color: var(--dim); }
.price + .small { margin-top: 4px; }

/* ---------- Waitlist capture */
.waitlist {
  display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s4);
}
.waitlist input {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--card); border: 1.5px solid rgba(42, 32, 24, 0.18);
  border-radius: 16px; padding: 14px 18px; width: min(340px, 100%);
}
.waitlist input:focus {
  outline: 2px solid var(--ember); outline-offset: 1px; border-color: transparent;
}
.waitlist input::placeholder { color: var(--dim); opacity: 0.7; }
.waitlist .btn { margin-top: 0; }
.waitlist-note { margin-top: var(--s2); }
.waitlist-note a { color: var(--ember); }

/* ---------- Buttons */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 15px 30px; border-radius: 16px; font-size: 1rem;
}
.btn.primary { background: var(--ink); color: var(--bg-top); }
.btn.soon {
  background: none; border: 1.5px solid var(--dim); color: var(--dim);
  cursor: default;
}

/* ---------- Hero */
.hero-copy .lede { margin-top: var(--s3); }
.hero-copy .btn { margin-top: var(--s4); }
.hero-copy .beta-line { margin-top: var(--s2); }

/* ---------- Final CTA */
.cta { text-align: center; }
.cta .lede { margin: var(--s3) auto 0; }
.cta .btn { margin-top: var(--s4); }

/* ---------- Footer */
footer {
  padding: var(--s5) 0 var(--s6); color: var(--dim); font-size: 0.9rem;
}
footer a { color: var(--dim); }
footer .links {
  display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2);
}
footer p + p { margin-top: var(--s1); }

/* ---------- Legal pages */
.legal { max-width: 680px; padding: var(--s4) 0 var(--s6); }
.legal h1 { font-size: 2.2rem; }
.legal h1 + .small { margin-top: var(--s1); }
.legal h2 { font-size: 1.3rem; margin: var(--s4) 0 var(--s2); }
.legal p, .legal li { color: var(--dim); margin-bottom: var(--s2); }
.legal ul { padding-left: 22px; }

/* Waitlist success line (in-page mode only) */
.waitlist-done {
  margin-top: var(--s4); font-weight: 600; color: var(--spruce);
}