/*
 * Kindava — the website.
 *
 * Two kinds of page sharing one shell. A front page and an about page,
 * which have to introduce a product nobody has heard of to somebody who
 * may be buying it for their father. And four documents - two policies,
 * support, and account deletion - which exist because three app store
 * rules and one state statute require them.
 *
 * The documents stay documents. The front page is allowed to be a front
 * page. What they share: the same type, the same colours, and the same
 * refusal to oversell something people may turn to when they are alone.
 *
 * Type runs larger than a typical site. The people reading this are
 * often in their seventies and eighties, or are a relative reading it on
 * a phone in a car park. 19px body is the floor, not a choice.
 *
 * Colours are the logo's own, sampled from the artwork: deep blue
 * #285878, the lighter blue #70B0C0, the warm #F89058. The orange is
 * rationed - it marks the person's own voice and nothing else, the same
 * way it does in the app, so the two read as one object.
 *
 * No stock photography. The cliché for this product is a smiling older
 * person holding a tablet, and it is both a lie and a small insult. The
 * product shows itself instead: a real conversation, in the colours it
 * actually uses.
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --sunk: #F2F5F7;
  --bubble: #EDF1F4;
  --border: #E4E2DD;
  --text: #15181C;
  --muted: #555D66;
  --faint: #7A838C;
  --accent: #285878;
  --accent-text: #FFFFFF;
  --warm: #F89058;
  --warn-bg: #FFF6EE;
  --warn-edge: #F89058;
  --max: 46rem;
  --wide: 64rem;
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #101820;
    --surface: #17212B;
    --sunk: #141D26;
    /* Lighter than the card, not darker - the relationship flips with
       the ground, and reusing one token for both got it backwards. */
    --bubble: #253444;
    --border: #2E3D4A;
    --text: #ECEEF0;
    --muted: #A6B0BA;
    --faint: #7E8993;
    --accent: #70B0C0;
    --accent-text: #0E2733;
    --warn-bg: #241B13;
  }
}

:root[data-theme='dark'] {
  --bg: #101820;
  --surface: #17212B;
  --sunk: #141D26;
  --bubble: #253444;
  --border: #2E3D4A;
  --text: #ECEEF0;
  --muted: #A6B0BA;
  --faint: #7E8993;
  --accent: #70B0C0;
  --accent-text: #0E2733;
  --warn-bg: #241B13;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.65;
  /* A 16px gutter at phone width, and never a sideways scroll. */
  padding: 0 16px;
}

.wrap { max-width: var(--max); margin: 0 auto; }

/* ---- header ---- */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
}

header img { height: 38px; width: auto; display: block; }

nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 1rem;
}
nav a:hover, nav a:focus-visible { color: var(--accent); text-decoration: underline; }

/* ---- type ---- */
h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 2.5rem 0 0.75rem;
}

h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 2.5rem 0 0.5rem;
  padding-top: 0.25rem;
}

h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem;
     margin: 1.75rem 0 0.4rem; }

p, li { color: var(--text); }
.lead { font-size: 1.2rem; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.95rem; color: var(--muted); }

a { color: var(--accent); }

ul { padding-left: 1.3rem; }
li { margin: 0.35rem 0; }

/* ---- tables: the policies are mostly tables ---- */
.scroll { overflow-x: auto; margin: 1.25rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.97rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

th { color: var(--muted); font-weight: 600; }

/* ---- blocks ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

.notice {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-edge);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.notice strong { display: block; margin-bottom: 0.25rem; }

/* Crisis numbers. Prominent on every page that mentions distress, never
   dressed up — this is the one piece of content that has to be found by
   somebody who is not reading carefully. */
.crisis {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 2rem 0;
}
.crisis p { margin: 0.35rem 0; }
.crisis .num { font-size: 1.3rem; font-weight: 700; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--accent);
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}
.btn:hover, .btn:focus-visible { opacity: 0.88; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-danger { background: #B4452F; border-color: #B4452F; color: #fff; }

label { display: block; font-weight: 600; margin: 1.25rem 0 0.4rem; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- footer ---- */
footer {
  margin: 4rem 0 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer .links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   The front page
   =====================================================================
   Everything below is used by index.html and about.html only. The
   document pages keep the plain shell above, because a privacy policy
   that looks like a pitch is a privacy policy nobody believes. */

.page-wide { max-width: var(--wide); margin: 0 auto; }

/* ---- hero ---- */
.hero { padding: 4rem 0 1rem; }

.hero h1 {
  font-size: clamp(2.3rem, 6.5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 1.25rem;
  max-width: 14ch;
}

.hero .lead {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.55;
  max-width: 34ch;
  margin: 0 0 2rem;
}

/* Two columns once there is room, and the conversation sits beside the
   words rather than under them. Below that it stacks, which is the
   order it should be read in anyway. */
.hero-split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .hero-split { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
  .hero { padding: 5.5rem 0 2rem; }
}

/* ---- the conversation, in the app's own colours ---- */
.talk {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.5rem 1.35rem;
}

.talk .bubble {
  max-width: 88%;
  padding: 0.8rem 1.1rem;
  border-radius: 20px;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Kindava: the cool half of the mark. */
.talk .them {
  align-self: flex-start;
  background: var(--bubble);
  color: var(--text);
  border-bottom-left-radius: 7px;
}

/* The person: the warm half. The same mapping the app uses, because
   the logo is two figures making a heart between them and a
   conversation has exactly two voices. */
.talk .me {
  align-self: flex-end;
  background: var(--warm);
  color: #2A1708;
  border-bottom-right-radius: 7px;
}

.talk .when {
  align-self: center;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0.25rem 0;
}

/* ---- bands ---- */
.band {
  margin: 4.5rem -16px 0;
  padding: 3.5rem 16px;
  background: var(--sunk);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.band h2, .section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  margin-top: 0;
  max-width: 20ch;
}

.section { margin: 4.5rem 0; }

.measure { max-width: 38ch; }
.measure-wide { max-width: 54ch; }

/* ---- steps and feature grids ---- */
.grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 46rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.step { }

.step .n {
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--warm);
  display: block;
  margin-bottom: 0.6rem;
}

.step h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.step p { margin: 0; color: var(--muted); font-size: 1rem; }

/* ---- the "not" list: the most important content on the page ---- */
.nots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0;
}

.nots span {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.98rem;
  color: var(--muted);
}

/* ---- pull quote ---- */
.pull {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--text);
  border-left: 3px solid var(--warm);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
  max-width: 28ch;
}

/* ---- call to action ---- */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 2rem;
}

.hero-mark {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .fade { animation: rise 0.6s ease-out both; }
  .fade:nth-child(2) { animation-delay: 0.08s; }
  .fade:nth-child(3) { animation-delay: 0.16s; }
}

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