/* The pages added for search on 2026-10-05: the facts page (about.html), the comparison
   (pukki-vs-chatgpt.html), the question pages and their index (questions/, written by the site
   tool). They are documents: styles.css gives them the tokens, the nav and the footer, legal.css
   the long-form reading, and this file their few components.

   The same rules as everywhere on the site. Every neutral is R == G == B and hue is an authored
   accent: here the pencil line beside Pukki's own words and the one word "Edited". Nothing is
   handwritten: on a document the hand would be a heading or a label, which it never is. */

/* ------------------------------------------------------------ the way to the app
   One filled button, the documents' own: `.button` is the poster's and is sized in the poster's
   unit, which a document does not have. Until the app is on the App Store it says so and opens
   the waitlist; the site tool writes its address and, later, its words (render.ts). */

.legal .cta__button,
.cta__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  background: var(--action);
  color: var(--paper);
  font: 600 .9375rem/1 var(--font);
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms;
}

.cta__button:hover { background: var(--ink-mid-2); }
.cta__button:active { background: var(--ink); }

.cta__button--nav {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: var(--t-small);
}

.cta__logo { display: block; width: 13px; height: 16px; }

.cta {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 22px;
}

.legal .cta__line {
  margin: 0;
  font: 600 1.25rem/1.3 var(--font);
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.legal .cta__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 1.125rem;
}

.cta__note,
.cta__more,
.doc__note {
  font: 400 var(--t-small)/1.5 var(--font);
  color: var(--ink-soft);
}

.legal .cta__more { margin-top: .875rem; }
.legal .cta__more a { color: var(--ink-soft); }

/* ----------------------------------------------------------------- reading */

.doc h1 { text-wrap: balance; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--s3);
  font: 400 var(--t-small)/1.4 var(--font);
  color: var(--ink-soft);
}

.legal .crumb a {
  color: var(--ink-soft);
  text-decoration-color: transparent;
}

.legal .crumb a:hover { color: var(--ink-strong); text-decoration-color: var(--ink-faint-2); }

/* ------------------------------------------------------------ answers by age
   What Pukki said, one block an age band. The words are the page's reason, so they are set a
   step larger than the text around them, beside the same pencil that underlines the headline.
   An answer that is not word for word Pukki's says so directly under it. */

.ages {
  display: grid;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.legal .age h3 {
  margin: 0;
  font: 600 var(--t-small)/1.4 var(--font);
  color: var(--ink-soft);
}

.age__said {
  position: relative;
  margin: .5rem 0 0;
  padding-left: 1.125rem;
}

.age__said::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  bottom: .3em;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-gold);
}

.legal .age__said p {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.legal .edited {
  margin-top: .625rem;
  padding-left: 1.125rem;
  font: 400 var(--t-small)/1.5 var(--font);
  color: var(--ink-soft);
}

.edited__mark { font-weight: 600; color: var(--label-gold); }
.legal .edited a { color: var(--ink-soft); }

/* An idea to try, as the app's Together card: the one grey fill on the page. */
.together {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 16px;
  background: var(--card);
}

.together .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .0625rem;
  color: var(--ink-strong);
}

.legal .together p {
  display: grid;
  gap: .125rem;
  margin: 0;
}

.together strong { color: var(--ink); }
.together span { color: var(--ink-mid-2); }

/* One more why: the pages this one leads to. Rules between the rows only, as on the home page's
   findings. */
.legal ul.next,
.legal ul.qlist {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.next li,
.qlist li { margin: 0; }

.next li + li,
.qlist li + li { border-top: 1px solid var(--hairline); }

.legal .next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.next a::after {
  content: "\2192";
  color: var(--ink-faint);
  font-weight: 400;
  transition: translate 200ms var(--ease-lift);
}

.next a:hover::after { color: var(--ink-strong); translate: 3px 0; }

.legal ul.sources { font-size: .9375rem; }

/* ------------------------------------------------------------------- index */

.legal h2 .icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: .5rem;
  vertical-align: -.2em;
  color: var(--ink-strong);
}

.qlist li { padding: .9375rem 0; }

.legal .qlist a {
  display: block;
  color: var(--ink);
  font: 600 1.1875rem/1.3 var(--font);
  letter-spacing: -.01em;
  text-decoration: none;
}

.legal .qlist a:hover { text-decoration: underline; text-underline-offset: .18em; }

.qlist span {
  display: block;
  margin-top: .25rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------- facts
   The facts page's table: what a parent, a reviewer or a search engine can quote, a line a fact.
   Two columns where there is room, the name over its fact on a phone. */

.facts {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  margin: 1.5rem 0 0;
}

.facts dt,
.facts dd {
  margin: 0;
  padding: .8125rem 0;
  border-top: 1px solid var(--hairline);
}

.facts dt:first-of-type,
.facts dt:first-of-type + dd { border-top: 0; }

.facts dt {
  padding-right: 1.25rem;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 599px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: .125rem; border-top: 0; }
  .facts dt:first-of-type { border-top: 0; }
}

/* ------------------------------------------------------------- screenshots
   The App Store's six frames. Three across where the column has room; on a phone one row to
   swipe, each wide enough to read, running to the window's edges. */

.screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1rem;
  margin: 1.5rem 0 0;
}

.screens figure { margin: 0; }

.screens img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 18px;
}

.screens figcaption {
  margin-top: .625rem;
  font: 400 var(--t-small)/1.45 var(--font);
  color: var(--ink-soft);
}

@media (max-width: 599px) {
  .screens {
    display: flex;
    gap: .875rem;
    margin-inline: calc(-1 * var(--inset));
    padding-inline: var(--inset);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--inset);
    scrollbar-width: none;
  }

  .screens figure {
    flex: 0 0 min(68vw, 16.5rem);
    scroll-snap-align: start;
  }
}