/* Caradomi's public site.
 *
 * Two audiences, and the design has to serve both without choosing. An adult
 * child deciding whether to put this on a parent's phone, and a compliance
 * reviewer checking that what we claim matches what we do. The first needs the
 * page to feel like something that will still exist next year; the second needs
 * the facts to be findable in seconds.
 *
 * Restraint is the brief. This product's whole differentiator is that it does
 * not overstate itself - it says plainly which features are off, and which
 * platform can do less. A site full of gradients and motion would contradict
 * the thing it is selling.
 *
 * No external fonts, deliberately. The privacy policy lists every outside
 * company that ever receives anything; loading a font from Google would hand
 * every visitor's address to Google and make that page untrue. System stacks
 * only.
 */

:root {
  color-scheme: light dark;

  /* One green, carried from the app. Everything else is neutral so the green
     only appears where something is actionable or reassuring. */
  --brand: #14532d;
  --brand-bright: #1b6b3a;
  --brand-wash: #eef6f0;

  --ink: #14181a;
  --ink-soft: #4c565a;
  --ink-faint: #6b7478;

  --paper: #ffffff;
  --paper-raised: #f7f9f8;
  --line: #e2e8e4;
  --line-strong: #c9d3cd;

  --alert: #8a1c11;
  --alert-wash: #fdf3f1;

  --radius: 12px;
  --measure: 68ch;

  /* A fifth-based scale. Sizes chosen to stay generous on a phone, because a
     70-year-old is a likely reader and 16px is not enough for them. */
  --step--1: clamp(0.94rem, 0.92rem + 0.1vw, 1rem);
  --step-0: clamp(1.09rem, 1.05rem + 0.2vw, 1.19rem);
  --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.05rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #7fd1a3;
    --brand-bright: #9ee0bb;
    --brand-wash: #14231b;

    --ink: #e9efec;
    --ink-soft: #aab5b0;
    --ink-faint: #8a9591;

    --paper: #101312;
    --paper-raised: #171b19;
    --line: #262d29;
    --line-strong: #37403b;

    --alert: #ff9d90;
    --alert-wash: #241512;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings in a serif. The one deviation from the system sans, and it does real
   work: it separates what the page says from what the page is, and reads warmer
   than another weight of the same face. Georgia is on effectively every device,
   so it costs no request. */
h1, h2, h3 {
  font-family: Iowan Old Style, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.15rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--brand-bright); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.narrow { max-width: 52rem; }

/* Anything a keyboard user needs before the navigation. */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--brand);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}
.skip:focus { left: 0; top: 0; }

/* ---- header ---- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 1rem;
}
.brand {
  font-family: Iowan Old Style, Palatino, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.brand .mark {
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
  color: var(--brand);
}
.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  font-size: var(--step--1);
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.2rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand); }
.site-nav a[aria-current="page"] { font-weight: 650; }

/* ---- hero ---- */

.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.hero .eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 650;
  margin-bottom: 1.1rem;
}
.hero h1 { max-width: 20ch; }
.hero .lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 46ch;
  margin-top: 1.4rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.45rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  border: 1px solid transparent;
}
.button.primary { background: var(--brand); color: var(--paper); }
@media (prefers-color-scheme: dark) { .button.primary { color: #0d1210; } }
.button.primary:hover { background: var(--brand-bright); }
.button.quiet { border-color: var(--line-strong); color: var(--ink); }
.button.quiet:hover { border-color: var(--brand); color: var(--brand); }

/* ---- sections ---- */

section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
section + section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: 2.25rem; max-width: 46ch; }
.section-head p { color: var(--ink-soft); margin-top: 0.85rem; }

/* ---- feature cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card { background: var(--paper); padding: 1.6rem 1.5rem; }
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0; }

/* The platform caveats. Not fine print - the difference between what an iPhone
   and an Android phone can do is exactly what someone needs before they buy a
   phone for a parent, and burying it would be the kind of omission this product
   exists not to make. */
.card .caveat {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.92em;
  color: var(--ink-faint);
}

/* ---- the honesty section ---- */

.plainly {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.plainly ul { margin: 0; padding-left: 1.15rem; }
.plainly li { margin-bottom: 0.9rem; color: var(--ink-soft); max-width: var(--measure); }
.plainly li:last-child { margin-bottom: 0; }
.plainly li strong { color: var(--ink); font-weight: 650; }

/* ---- the safety notice ---- */

.safety {
  border: 1px solid var(--alert);
  border-left-width: 5px;
  background: var(--alert-wash);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}
.safety h2 { font-size: var(--step-1); color: var(--alert); margin-bottom: 0.7rem; }
.safety p { margin-bottom: 0; }
.safety p + p { margin-top: 0.8rem; }

/* ---- generic content, for the legal and messaging pages ---- */

.prose { max-width: var(--measure); padding-block: clamp(2rem, 5vw, 3.5rem); }
.prose h2 { margin-top: 2.8rem; margin-bottom: 0.9rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.6rem; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.3rem; }
.prose li { margin-bottom: 0.6rem; }
.prose .lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: var(--step--1);
  display: block;
  overflow-x: auto;
}
th, td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 650;
  border-bottom-color: var(--line-strong);
}
tr:last-child td { border-bottom: none; }

.notice {
  background: var(--brand-wash);
  border-left: 4px solid var(--brand);
  padding: 1.15rem 1.4rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.6rem 0;
}
.notice.warn {
  background: var(--alert-wash);
  border-left-color: var(--alert);
}
.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

code {
  background: var(--brand-wash);
  padding: 0.12em 0.42em;
  border-radius: 5px;
  font-size: 0.88em;
}

/* The one address on the contact page. Sized like something you are meant to
   act on rather than a line of body text - it is the whole point of the page. */
.contact-email {
  font-size: var(--step-2);
  font-family: Iowan Old Style, Palatino, Georgia, serif;
  margin: 1.75rem 0 2rem;
  word-break: break-word;
}
.contact-email a { text-decoration-thickness: 0.06em; }

/* ---- footer ---- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-raised);
  margin-top: clamp(3rem, 8vw, 5rem);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.site-footer .wrap { padding-block: 2.75rem 3.25rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
  margin-bottom: 2.25rem;
}
.footer-grid h2 {
  font-family: inherit;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
  font-weight: 650;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a { color: var(--ink-soft); text-decoration: none; }
.footer-grid a:hover { color: var(--brand); text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.footer-bottom p { margin-bottom: 0.6rem; font-size: 0.95em; }
.footer-bottom .emergency { color: var(--ink); font-weight: 600; }

/* Deliberately kept now that no placeholders remain. It is a tripwire: if
   anyone reintroduces a «placeholder» it renders in loud yellow rather than
   shipping quietly as ordinary text. */
.fill {
  background: #fff3cd;
  color: #664d03;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .fill { background: #4a3f14; color: #ffe69c; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}