/*
  The marketing site.

  Bev's brief, across several rounds: "shorter, snappier... it needs some visual
  interest either way though... i don't want it to get too busy or loud but not
  really plain jane either... it needs to at least say the problem its trying to
  solve for who."

  The three sites she linked all do the same three things, so this does them too:
  a headline that states the problem in one plain sentence, almost no text on
  screen at once, and the product itself as the visual interest rather than
  decoration.

  THE PHONE MOCKUPS ARE HTML, not screenshots. They stay sharp at any size, cost
  nothing to load, and cannot ever put a real child's name on a public page,
  which a screenshot of the running app very nearly did.

  Palette and type match the app.
*/
:root {
  --cream: #faf7f2;
  --card: #ffffff;
  --slate: #2f3436;
  --slate-soft: #5b6366;
  /*
     DARKENED 27 Aug 2026. #8a9295 scored 2.97:1 on cream and WCAG AA wants
     4.5:1 for text at the sizes this color is used at, so every one of them
     failed: the note under the launch button, the fine print under the
     signup form, and the footer line saying Advocary is not a law firm. The
     least readable color on the site was carrying the most legally load
     bearing sentence on it.

     Same hue carried darker. 5.25:1 on cream, 5.61:1 on white, 4.61:1 on the
     plum tint. The TINT is the binding surface, not the cream, which is the
     part that is easy to miss when eyeballing a swatch against a background.
  */
  --muted: #61696c;
  --plum: #513c5d;
  --plum-deep: #43314e;
  --plum-soft: #6d5b77;
  --plum-tint: #ece7f0;
  --plum-border: #d5d0d8;
  --border: #e8e3db;
  --success: #4a6b4e;
  --error: #8c3a2b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--slate);
  font: 17px/1.6 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 0 22px; }

.draft {
  background: var(--plum);
  color: #fff;
  text-align: center;
  font: 600 13px/1.4 ui-sans-serif, system-ui, sans-serif;
  padding: 9px 16px;
}

/* ---------- header ------------------------------------------------------ */
header { padding: 40px 0 0; text-align: center; }
.logo { width: 170px; max-width: 55%; height: auto; }

nav {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 20px 0 0;
  font: 14px/1 ui-sans-serif, system-ui, sans-serif;
}
nav a { color: var(--plum-soft); text-decoration: none; padding: 6px 2px; }
nav a:hover, nav a:focus-visible { text-decoration: underline; }
nav a[aria-current='page'] { color: var(--plum); font-weight: 700; }

/* ---------- hero -------------------------------------------------------- */
.hero { text-align: center; padding: 40px 0 10px; }
h1 {
  font-size: clamp(29px, 4.6vw, 42px);
  line-height: 1.18;
  margin: 0 auto 16px;
  max-width: 16em;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lede {
  font-size: 18px;
  color: var(--slate-soft);
  margin: 0 auto;
  max-width: 32em;
  text-wrap: pretty;
}

.cta-row {
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cta {
  display: inline-block;
  background: var(--plum);
  color: #fff;
  text-decoration: none;
  font: 600 16px/1.2 ui-sans-serif, system-ui, sans-serif;
  padding: 15px 26px;
  border-radius: 30px;
}
.cta:hover { background: var(--plum-deep); }
.cta-note { font: 13.5px/1.4 ui-sans-serif, system-ui, sans-serif; color: var(--muted); }

/* ---------- the three steps, words beside a phone ----------------------- */
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  padding: 52px 0 0;
  justify-items: center;
}
@media (min-width: 760px) {
  .step { grid-template-columns: 1fr auto; gap: 46px; justify-items: start; }
  .step.reverse .step-words { order: 2; }
  .step.reverse .phone { order: 1; }
}
.step-words { max-width: 30em; }
.stepno {
  font: 700 11.5px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 6px;
}
.step-words h2 { font-size: 26px; margin: 0 0 10px; text-wrap: balance; }
.step-words p { margin: 0; color: var(--slate-soft); font-size: 16.5px; }

/* ---------- the phone ---------------------------------------------------
   Bev: "the non uniform size of the phone examples is weird. each is a
   different size." They were the same width and different heights, because the
   content lengths differed. A fixed frame with the body flexing inside fixes it
   without anyone having to write copy to a character count.

   And: "I also want it to look like what the app really looks like so when they
   get to the app they arent like whoa this isnt what it showed." So these carry
   the app's real chrome, the plum bar with the child chip and the bottom tabs,
   rather than a tidied-up version of it. */
.phone {
  width: 268px;
  height: 486px;
  flex: none;
  display: flex;
  flex-direction: column;
  border: 9px solid #2b2630;
  border-radius: 30px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 16px 40px rgba(43, 38, 48, 0.18);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.phone-bar {
  background: var(--plum);
  color: #fff;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.phone-bar .menu { font-size: 13px; opacity: 0.9; }
.phone-bar .kid { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
.phone-bar .kid i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  color: var(--plum);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.phone-body { padding: 12px 11px; flex: 1; overflow: hidden; }
.phone-tabs {
  flex: none;
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--card);
  padding: 7px 4px 9px;
}
.phone-tabs span {
  flex: 1;
  text-align: center;
  font-size: 8.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.phone-tabs span.on { color: var(--plum); font-weight: 700; }

.m-h { font: 700 15px/1.3 Georgia, serif; color: var(--slate); margin: 2px 0 3px; }
.m-h2 { font: 700 12px/1.3 ui-sans-serif, system-ui, sans-serif; color: var(--slate); margin: 12px 0 6px; }
.m-sub { font-size: 10.5px; line-height: 1.4; color: var(--slate-soft); margin: 0 0 10px; }
.m-banner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--slate-soft);
}
.m-banner b { color: var(--slate); font-size: 11.5px; }
.m-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--slate);
  margin-bottom: 5px;
}
.m-input {
  background: var(--card);
  border: 1px solid var(--plum-border);
  border-radius: 9px;
  padding: 10px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 7px;
}
.m-chips { display: flex; gap: 5px; }
.m-chips span {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--slate-soft);
  background: var(--card);
}
.m-chips span.on { background: var(--plum-tint); border-color: var(--plum-border); color: var(--plum); }
/*
  The two moments that are not body text.

  Bev: "it is starting to look word wally... should we format that a bit
  different to break up the blocky." The diagnosis was styling rather than
  length: .lede was 18px slate-soft and this was 17 to 20px slate-soft, so two
  adjacent blocks read as one wall of the same object.

  The weight block gets the panel treatment the page already uses at the
  bottom, because it is the thesis and earns the strongest moment. The counting
  block gets a lighter version, centered plum with no panel, so the page has
  three distinct beats rather than three identical boxes.
*/
.weight {
  margin: 44px 0 0;
  padding: clamp(20px, 5vw, 28px) clamp(18px, 5vw, 26px);
  background: var(--plum-tint);
  border-radius: 18px;
}
/* Sized down on a phone deliberately: at a flat 19px this panel filled nearly
   half a 812px screen, which is a lot of ground for one block however good the
   sentence is. */
.weight p {
  margin: 0 auto;
  font-size: clamp(16.5px, 2.2vw, 19px);
  line-height: 1.5;
  color: var(--slate-soft);
  max-width: 28em;
  text-wrap: pretty;
}
.weight .weight-turn {
  margin: 12px auto 0;
  font-size: clamp(18px, 2.6vw, 21px);
  color: var(--plum);
  font-weight: 700;
  max-width: 28em;
  text-wrap: balance;
}

/* The counting beat: same family, no box, so it reads as a turn in the page
   rather than a second panel competing with the first. */
.weight.counting {
  background: none;
  padding: 0 4px;
  margin: 46px 0 10px;
  text-align: center;
}
.weight.counting .weight-turn {
  margin: 0 auto 12px;
  font-size: clamp(18.5px, 3vw, 24px);
}
.weight.counting p { max-width: 30em; }
.m-found {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--slate);
  background: var(--plum-tint);
  border: 1px solid var(--plum-border);
  border-radius: 8px;
  padding: 7px 9px;
  margin: 8px 0 6px;
}
.m-label {
  font: 700 8.5px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 13px 0 5px;
}
.m-line {
  font-size: 11.5px;
  color: var(--slate-soft);
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.m-line b { color: var(--slate); font-weight: 700; margin-right: 6px; }
.m-check, .m-file {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px 7px 24px;
  font-size: 11px;
  color: var(--slate);
  margin-bottom: 5px;
  position: relative;
}
.m-check::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--plum);
}
.m-file::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 8px;
  height: 10px;
  border-radius: 1px;
  border: 1.5px solid var(--plum-soft);
}
/*
  The home screen's split row: pending tasks on one side, a noticed win on the
  other. Each half only renders when it has something to say, and the whole row
  goes when both are empty, so a parent on day one is not greeted by a tally of
  what they have not done. Drawn here as it appears when both halves are full.
*/
.m-split {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  margin: 7px 0 0;
  font-size: 10.5px;
  color: var(--slate-soft);
}
.m-split span { flex: 1; }
.m-split i {
  flex: 0 0 1px;
  height: 13px;
  background: var(--border);
}
/* The Pull it together button, which is what does the gathering the page claims. */
.m-btn {
  margin: 9px 0 0;
  background: var(--plum);
  color: #fff;
  border-radius: 20px;
  padding: 7px 10px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
}

/* ---------- pull quote --------------------------------------------------- */
.pull {
  margin: 58px 0 0;
  padding: 26px 24px;
  background: var(--plum-tint);
  border-radius: 18px;
  text-align: center;
}
.pull p {
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.45;
  color: var(--plum);
  max-width: 24em;
  text-wrap: balance;
}
/* The closing line carries the weight, so it gets the same treatment the turn
   line has in the block at the top of the page.

   Bold alone reads as timid on plum-over-plum-tint, so it takes the deeper plum
   as well. Slate was tried and rejected: near-black in the middle of a plum
   quote reads as a different voice rather than as emphasis.

   Its own block, so the sentence stays whole rather than starting halfway along
   a line that ends the sentence before it. On a desktop it is one line. On a
   phone it wraps, which is correct: forcing one line there would either shrink
   the type or push the panel sideways. */
.pull strong {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--plum-deep);
  text-wrap: balance;
}

/* ---------- signup ------------------------------------------------------- */
.signup {
  background: var(--card);
  border: 2px solid var(--plum);
  border-radius: 18px;
  padding: 26px;
  margin: 46px 0 0;
}
.signup h2 { margin: 0 0 6px; font-size: 22px; }
.sub { color: var(--slate-soft); margin: 0 0 18px; max-width: 34em; font-size: 16px; }
form { display: grid; gap: 10px; max-width: 30em; }
label {
  font: 700 11.5px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
}
input, select {
  width: 100%;
  font: 16px/1.4 Georgia, serif;
  color: var(--slate);
  background: var(--card);
  border: 1px solid var(--plum-border);
  border-radius: 11px;
  padding: 12px 13px;
}
button {
  font: 600 16px/1.2 ui-sans-serif, system-ui, sans-serif;
  background: var(--plum);
  color: #fff;
  border: 0;
  border-radius: 11px;
  padding: 14px;
  cursor: pointer;
}
button[disabled] { opacity: 0.55; cursor: default; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
}
.fineprint { font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; color: var(--muted); margin: 12px 0 0; }
.status { font: 15px/1.5 ui-sans-serif, system-ui, sans-serif; margin: 12px 0 0; }
.status.ok { color: var(--success); }
.status.bad { color: var(--error); }

.tailnote {
  margin: 30px 0 0;
  text-align: center;
  font: 15px/1.6 ui-sans-serif, system-ui, sans-serif;
  color: var(--muted);
}
.tailnote a { color: var(--plum-soft); }

/* ---------- the longer page --------------------------------------------- */
.prose { padding: 34px 0 0; }
.prose p { max-width: 34em; color: var(--slate-soft); }
.prose h2 { font-size: 24px; margin: 0 0 8px; text-wrap: balance; }
.eyebrow {
  font: 700 11.5px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 4px;
}

details { border-top: 1px solid var(--border); padding: 13px 0; }
details summary {
  cursor: pointer;
  font: 600 15px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--plum);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '+'; font-size: 17px; line-height: 1; }
details[open] summary::before { content: '-'; }
details summary:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
details .body { padding: 10px 0 4px 22px; max-width: 36em; }
details .body p { margin: 0 0 10px; font-size: 15.5px; color: var(--slate-soft); }
details .body p:last-child { margin-bottom: 0; }

/* ---------- footer -------------------------------------------------------- */
footer {
  margin-top: 60px;
  padding: 24px 0 64px;
  border-top: 1px solid var(--border);
  font: 13px/1.6 ui-sans-serif, system-ui, sans-serif;
  color: var(--muted);
  text-align: center;
}
footer .row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
footer a { color: var(--plum-soft); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .legal { max-width: 46em; margin: 14px auto 0; }

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

/*
  The route from the landing page into the longer one. Sits above the signup
  because the reader deciding whether to leave an address is the one with the
  next question.
*/
.more-link {
  margin: 40px 0 0;
  font: 17px/1.5 Georgia, serif;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.more-link a {
  color: var(--plum);
  text-decoration: none;
  border-bottom: 1px solid var(--plum-border);
  padding-bottom: 2px;
}
.more-link a:hover {
  border-bottom-color: var(--plum);
}

/* The security block, added 9 Sep 2026.

   Parents ask about this before they sign up, and the answers were only in the
   privacy policy, which is the one page nobody reads first. Four short answers
   in the order the questions actually arrive: who sees it, where it is, what the
   AI does, and how to leave.

   Quieter than .pull on purpose. That block is the emotional turn of the page
   and this one is reassurance, so it takes the paper background and a border
   rather than the plum tint, and it must not compete with the sign-up below it. */
.security {
  margin: 58px 0 0;
  padding: 30px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.security h2 {
  margin: 0 0 6px;
  font-size: 23px;
  line-height: 1.3;
  color: var(--plum);
  text-wrap: balance;
}
.sec-grid {
  display: grid;
  gap: 22px 34px;
  /* 320 rather than 255, so this lands on two columns and not three with a
     lonely fourth underneath. These are paragraphs rather than labels, and a
     narrow column makes prose harder to read, not easier. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 20px;
}
.sec-item h3 {
  margin: 0 0 5px;
  font-size: 15px;
  color: var(--plum-deep);
}
.sec-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.sec-more {
  margin: 22px 0 0;
  font-size: 15px;
}