/* ==== Home: the simplification pass (2026-09-29) ====
   WEBSITE_CLARITY_PLAN.md section 14.3. Linked from index.html only, after
   styles.css and family-archive.css, so every rule here is the homepage's
   and wins a specificity tie with the shared sheets by coming last.
   Tokens only, never a hard-coded colour, so the dark theme follows.

   The reader is 55 or older (plan 14.1): nothing a visitor has to read is
   under 16px. The root is 18px on a laptop and 17px under 768px, so 0.95rem
   is the smallest size that clears 16px at both, and supporting lines sit at
   1rem (18px, or 17px on a phone). */

/* ---------- Rhythm ----------
   Less air between sections. The backgrounds alternate all the way down
   (#start went warm for it), so a shorter gap never runs two sections
   together. */
main > .section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.ornament {
  margin: 0.75rem 0 1.5rem;
}

/* The star is decoration, so it is drawn here rather than typed into the
   page: it stays out of the page's word count and, with the empty
   alternative text, out of what a screen reader announces. */
.ornament__symbol::before {
  content: "\2726";
  content: "\2726" / "";
}

/* One arrow for every "go further" link the pass touched, as a
   pseudo-element for the same reason (the .ho-organize__link pattern). */
.how-steps__note a::after,
.date-estimation__best-link::after,
.integration-card__link::after,
.fam-band__link::after,
.integrations__footnote a::after {
  content: "\2192";
  content: "\2192" / "";
  display: inline-block;
  transition: transform 0.2s ease;
}

.how-steps__note a::after,
.date-estimation__best-link::after,
.integrations__footnote a::after {
  margin-left: 0.35rem;
}

.how-steps__note a:hover::after,
.how-steps__note a:focus-visible::after,
.date-estimation__best-link:hover::after,
.date-estimation__best-link:focus-visible::after,
.integration-card__link:hover::after,
.integration-card__link:focus-visible::after,
.fam-band__link:hover::after,
.fam-band__link:focus-visible::after,
.integrations__footnote a:hover::after,
.integrations__footnote a:focus-visible::after {
  transform: translateX(3px);
}

/* ---------- Hero ---------- */
.hero__tagline {
  font-size: 0.9rem;
}

.hero--compare .hero__subtitle {
  max-width: 34rem;
}

.hero__trust {
  gap: 0.4rem 1.6rem;
  font-size: 1rem;
}

/* ---------- How It Works ----------
   Steps first: icon, title, one short line. The definition paragraph sits
   under them, then the four facts, then two quiet lines. */
.how-steps__intro .ornament {
  margin-bottom: 0;
}

#how-it-works .how-line {
  margin-top: 2.25rem;
}

.how-line__line {
  margin: 0.3rem 0 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.how-steps__def {
  max-width: 41rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.8;
}

#how-it-works .how-facts {
  margin-top: 2.25rem;
}

#how-it-works .how-facts__item b {
  font-size: 1rem;
}

#how-it-works .how-facts__item span,
#how-it-works .how-facts__link {
  font-size: 0.95rem;
}

#how-it-works .how-line__optional {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.how-line__optional-tag {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  padding: 0.05rem 0.6rem;
  vertical-align: baseline;
}

#how-it-works .how-steps__note {
  margin-top: 0.6rem;
  font-size: 1rem;
}

/* ---------- How does it know ---------- */
.date-estimation__intro {
  margin-bottom: 0;
}

.date-estimation__eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.date-estimation__intro p.date-estimation__ai {
  margin-bottom: 0;
}

#date-estimation .dd__verdict {
  font-size: 1rem;
  line-height: 1.6;
}

.date-estimation__more {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* The best-estimate box: a tip icon, one line, its link. */
#date-estimation .date-estimation__best-practices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 1.4rem;
  padding: 0.85rem 0.25rem;
}

.date-estimation__best-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
}

.date-estimation__best-practices p {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
}

#date-estimation .date-estimation__best-link {
  font-size: 1rem;
  white-space: nowrap;
}

/* ---------- Family Library (#organize) ----------
   Words and layout unchanged (plan 14.3); only the three labels that sat
   under 16px come up to the floor. */
.ho-organize__kicker,
.ho-group__label {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.ho-group .ho-field__line,
.ho-field__line {
  font-size: 0.95rem;
}

/* ---------- Everything we make (#start, plan section 15) ----------
   The last section: the whole platform as three numbered steps. */
.start-paths__eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.start-paths__lead {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: balance;
}

/* Three cards across from 1,061px only. Narrower, the chips ran past their
   tiles ("Automatic, with AI" up to about 1,040px, "Automatic, free" up to
   965px), so the cards stack sooner than the 900px in styles.css. */
@media (max-width: 1060px) {
  .start-paths__row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* The step number in front of each card's heading: the three cards are one
   path, in order, which is what the old heading left the reader to infer. */
.start-path__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.12em;
}

/* The Family Library tile: a <div> holding the link and the chip button,
   laid out on the same grid as its <a> siblings. The link's icon and words
   are the grid items (display: contents) and its ::after covers the whole
   tile, so everything but the chip opens the page; the chip and its tip sit
   above that cover. */
.start-tile--peek {
  position: relative;
}

.start-tile__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.start-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}

.start-tile--peek > .peek {
  grid-area: chip;
  justify-self: start;
  position: relative;
  z-index: 1;
}

.start-tile--peek:hover,
.start-tile--peek:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.start-tile--peek:has(> .start-tile__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The chip is a button here; the shared chip rule already sets its type. */
.start-tile--peek .start-tile__chip {
  cursor: pointer;
}

/* ---------- Download them, or send them ----------
   Each card is an icon, a name, a chip, one sentence and one link. */
.integrations__intro {
  margin-bottom: 1.75rem;
}

.integration-card {
  padding: 1.35rem 1.5rem 1.4rem;
}

.integration-card__head {
  margin-bottom: 0.85rem;
}

/* The chip was 11px capitals; it reads as a plain label now. The tablet
   band in styles.css shrinks it again, hence the doubled selector. */
.integration-card__tag,
.integration-card .integration-card__tag {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}

.integration-card__body {
  margin-bottom: 0.4rem;
}

.integration-card__link {
  margin-top: 0;
  font-size: 1rem;
}

#integrations .fam-band__link {
  font-size: 1rem;
}

#integrations .integrations__footnote {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-style: normal;
}

/* ---------- Closing CTA (plan section 15) ----------
   The reader who came all the way down gets a warmer band, a bigger line
   with its last two words in gold, and a bigger button; the small print
   under it comes up to the floor. */
main > .cta {
  padding: 5.5rem 0 6rem;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-warm) 100%);
  border-top: 1px solid var(--border-light);
}

main > .cta::before {
  width: 900px;
  height: 900px;
  bottom: -35%;
}

main > .cta h2 {
  max-width: 18ch;
  margin: 0 auto 1rem;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  text-wrap: balance;
}

main > .cta h2 em {
  font-style: normal;
  color: var(--accent);
}

main > .cta .cta__desc {
  margin-bottom: 2rem;
  font-size: 1.15rem;
}

main > .cta .cta__main-btn {
  padding: 1.1rem 2.8rem;
  font-size: 1.15rem;
  box-shadow: var(--shadow-warm);
}

.cta .cta__guides {
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  main > .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* 16px, with less tracking so "Scanned Family Photos" still fits on its
     own line on a 360px phone (landing.spec.mjs pins the break after
     "for"). */
  .hero__tagline {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }

  .hero__trust {
    gap: 0.35rem 1.2rem;
    font-size: 0.95rem;
  }

  .how-steps__def {
    margin-top: 2rem;
    font-size: 1rem;
    line-height: 1.75;
  }

  .how-line__line {
    margin-top: 0.15rem;
  }

  /* The four facts as an icon list: left-aligned lines read more easily
     than centred ones that wrap in a narrow column. */
  #how-it-works .how-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    max-width: 24rem;
    margin-top: 2rem;
  }

  #how-it-works .how-facts__item {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    column-gap: 0.85rem;
    row-gap: 0;
    align-items: start;
    text-align: left;
  }

  #how-it-works .how-facts__item svg {
    grid-row: span 2;
    margin: 0.1rem 0 0;
  }

  #how-it-works .how-facts__item > :not(svg) {
    grid-column: 2;
  }

  /* The tip box: icon, then the line, and the link under the line rather
     than under the icon. */
  #date-estimation .date-estimation__best-practices {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 0.35rem 0.8rem;
    align-items: start;
  }

  #date-estimation .date-estimation__best-link {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .hero--compare .hero__subtitle {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-steps__note a::after,
  .date-estimation__best-link::after,
  .integration-card__link::after,
  .fam-band__link::after,
  .integrations__footnote a::after {
    transition: none;
  }
}