/* Blog articles and the /blog hub.

   Built from the KidsFoldr design system (docs/design/design-system/, the
   Claude Design export) and its Informational Article template. Every color
   comes from the design system's --kf-* tokens in /ds/tokens.css; the few the
   template uses that the token sheet lacks are defined once, below, as
   --blog-*. Nunito comes from /ds/fonts.css. Load order on a blog page:

     /ds/fonts.css, /ds/tokens.css, /styles.css, /blog/blog.css

   /styles.css still carries the site header and footer (v1.0), so this file
   remaps its variables onto the design system's for blog pages only. Light
   only: the design system has no dark palette. Articles are built by the
   content engine (content-engine/); add a class here rather than letting pages
   grow their own <style> blocks. */

:root {
  color-scheme: light;

  /* Template colors the token sheet does not carry. */
  --blog-navy-hover: #1e4c93;
  --blog-blue-hover: #7dc2ff;
  --blog-navy-rule: #2457a6;
  --blog-error-edge: #f6c9c9;
  --blog-error-word: #b3363a;
  --blog-error-body: #7a2e30;
  --blog-success-word: #1b7a47;
  --blog-success-edge: #bfe8d0;
  --blog-success-body: #235c40;

  /* Site variables from /styles.css, remapped onto the design system. */
  --ink: var(--kf-ink);
  --ink-mid: var(--kf-slate);
  --accent: var(--kf-accent);
  --background: var(--kf-surface);
  --surface: var(--kf-surface);
  --border: var(--kf-line);
}

body {
  font-family: var(--kf-font);
  background: var(--kf-surface);
  color: var(--kf-ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ---- Page frame ---- */

.blog-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-two);
  align-items: center;
  padding-top: var(--kf-space-three);
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-steel);
}

.crumbs a {
  color: var(--kf-steel);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--kf-ink);
}

.crumbs [aria-current] {
  color: var(--kf-slate);
}

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

.article-head {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-three);
  padding: 22px 0 26px;
}

.eyebrow {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--kf-blueTint);
  color: var(--kf-ink);
  font-size: 13px;
  font-weight: 700;
}

.article-head h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.9px;
  line-height: 1.08;
  color: var(--kf-ink);
  text-wrap: pretty;
}

/* Every block in the article head and body shares one right edge: the
   .blog-wrap container's. Nothing inside it sets its own narrower width. */
.dek {
  margin: 0;
  max-width: none;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-slate);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--kf-line);
}

.byline .who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.byline .name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--kf-ink);
}

.byline .role {
  display: block;
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-steel);
}

.byline .dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-two);
  align-items: center;
  margin-left: auto;
}

/* MemberTile: a family color's fill with the initial in its text color. Set
   the pair with a tile-<color> class. */
.tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 17px;
  font-weight: 700;
}

.tile-manila { background: var(--kf-member-manila-fill); color: var(--kf-member-manila-text); }
.tile-sky { background: var(--kf-member-sky-fill); color: var(--kf-member-sky-text); }
.tile-mint { background: var(--kf-member-mint-fill); color: var(--kf-member-mint-text); }
.tile-coral { background: var(--kf-member-coral-fill); color: var(--kf-member-coral-text); }
.tile-lavender { background: var(--kf-member-lavender-fill); color: var(--kf-member-lavender-text); }
.tile-peach { background: var(--kf-member-peach-fill); color: var(--kf-member-peach-text); }
.tile-teal { background: var(--kf-member-teal-fill); color: var(--kf-member-teal-text); }
.tile-rose { background: var(--kf-member-rose-fill); color: var(--kf-member-rose-text); }
.tile-lime { background: var(--kf-member-lime-fill); color: var(--kf-member-lime-text); }
.tile-slate { background: var(--kf-member-slate-fill); color: var(--kf-member-slate-text); }

/* Pills: the plain one (white, line edge, slate) and StatusPill "on"
   (blue tint, success dot). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  font-size: var(--kf-font-size-small);
  font-weight: 700;
  color: var(--kf-slate);
  white-space: nowrap;
}

.pill-on {
  background: var(--kf-blueTint);
  border-color: transparent;
  color: var(--kf-ink);
}

.pill-on::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kf-success);
}

/* ---- Two columns: contents rail and the article ---- */

.article-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
  padding-bottom: 60px;
}

.toc {
  position: sticky;
  top: 24px;
  flex: 0 1 210px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kf-steel);
}

.toc nav {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-half);
}

.toc nav a {
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--kf-line);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kf-accent);
  text-decoration: none;
}

.toc nav a:hover {
  border-left-color: var(--kf-accent);
  color: var(--kf-ink);
}

.toc .button {
  margin-top: 10px;
  text-align: center;
}

.article {
  flex: 1 1 420px;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Below the two-column width the rail stacks above the article and stops
   sticking, as the template does. */
@media (max-width: 700px) {
  .toc {
    position: static;
    flex-basis: 100%;
  }
}

/* ---- Body type ---- */

.article section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.article h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 31px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--kf-ink);
}

.article h3,
.roundup .rs > h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kf-ink);
}

.article p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--kf-slate);
}

.article a {
  font-weight: 700;
  color: var(--kf-accent);
}

.article a:hover {
  color: var(--kf-ink);
}

.article strong {
  font-weight: 700;
  color: var(--kf-ink);
}

.article ul,
.article ol,
.roundup .rs > ul,
.roundup .rs > ol {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-two);
  margin: 0;
  padding: 0 0 0 20px;
}

.article li,
.roundup .rs > ul li,
.roundup .rs > ol li {
  font-size: var(--kf-font-size-body);
  font-weight: 600;
  line-height: 1.6;
  color: var(--kf-slate);
}

.article figure,
.picked figure,
.roundup .rs figure {
  margin: 0;
}

.article figure img,
.picked figure img,
.roundup .rs figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

/* Diagrams are drawn to size and never scale up past it on a wide screen.
   The tall 640px box diagrams (homeschool "who sees what", timelines) are
   capped further so one never fills a desktop screen. */
.article figure img[src$=".svg"],
.article figure img[src^="data:image/svg"] {
  width: auto;
}

.article figure img[width="640"][src$=".svg"],
.article figure img[width="640"][src^="data:image/svg"] {
  max-width: min(100%, 480px);
}

/* On a wide screen the tall box diagram is a small helper to the right,
   and the text wraps around it. Tables, callouts and app screenshots start
   below it, so nothing is squeezed beside it. */
@media (min-width: 1000px) {
  /* Sections are flex columns, which ignore floats, so a section holding
     one of these diagrams switches to normal flow with the same 14px rhythm. */
  .article section:has(> figure img[width="640"][src$=".svg"]),
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) {
    display: flow-root;
  }

  .article section:has(> figure img[width="640"][src$=".svg"]) > *,
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) > * {
    margin: 0 0 14px;
  }

  .article section:has(> figure img[width="640"][src$=".svg"]) > figure:has(img[width="640"][src$=".svg"]),
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) > figure:has(img[width="640"][src^="data:image/svg"]) {
    float: right;
    width: min(38%, 320px);
    margin: 4px 0 14px 28px;
  }

  .article section:has(> figure img[width="640"][src$=".svg"]) > figure:has(img[width="640"][src$=".svg"]) img,
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) > figure:has(img[width="640"][src^="data:image/svg"]) img {
    width: 100%;
    max-width: 100%;
  }

  /* With nothing to wrap beside it (a table or callout comes next), the
     diagram stays in line at the same small size instead of leaving a gap. */
  .article section:has(> figure img[width="640"][src$=".svg"]) > figure:has(img[width="640"][src$=".svg"]):has(+ :is(.table-scroll, .callout, figure)),
  .article section:has(> figure img[width="640"][src$=".svg"]) > figure:has(img[width="640"][src$=".svg"]):last-child,
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) > figure:has(img[width="640"][src^="data:image/svg"]):has(+ :is(.table-scroll, .callout, figure)),
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) > figure:has(img[width="640"][src^="data:image/svg"]):last-child {
    float: none;
    width: min(100%, 400px);
    margin: 0 0 14px;
  }

  .article section:has(> figure img[width="640"][src$=".svg"]) > :is(.table-scroll, .callout, figure.app-shots),
  .article section:has(> figure img[width="640"][src^="data:image/svg"]) > :is(.table-scroll, .callout, figure.app-shots) {
    clear: both;
  }
}

.article figcaption,
.picked figcaption,
.roundup .rs figcaption {
  margin-top: var(--kf-space-two);
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-steel);
}

/* App screenshots are phone-shaped, so they are capped: one never fills a
   desktop screen. A pair sits side by side, on a phone too. */
.article figure.app-shots,
.roundup .rs figure.app-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  gap: 12px;
}

.article figure.app-shots > a:only-of-type,
.roundup .rs figure.app-shots > a:only-of-type,
.roundup .rs figure.app-shots > img:only-of-type {
  grid-column: 1 / -1;
  max-width: 260px;
}

.article figure.app-shots figcaption,
.roundup .rs figure.app-shots figcaption {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* ---- Modules ---- */

/* The short answer: first thing in every article. */
.short-answer {
  background: var(--kf-blueTint);
  border: 1px solid var(--kf-skyEdge);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article .short-answer ul {
  list-style: none;
  padding: 0;
  gap: 10px;
}

.article .short-answer li {
  position: relative;
  padding-left: 17px;
}

.short-answer li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--kf-ink);
}

/* Callouts: note (not legal advice), sources, tip, caution. */
.callout {
  border-radius: var(--kf-radius-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.callout .label {
  letter-spacing: 0.06em;
}

.article .callout p {
  font-size: 15px;
  line-height: 1.6;
}

.callout-legal {
  background: var(--kf-errorLight);
  border: 1px solid var(--blog-error-edge);
  border-left: 4px solid var(--kf-error);
}

.callout-legal .label { color: var(--blog-error-word); }
.article .callout-legal p { color: var(--blog-error-body); }

.callout-sources {
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  gap: var(--kf-space-two);
}

.callout-sources .label { color: var(--kf-ink); }

.article .callout-sources ol {
  list-style: none;
  padding: 0;
}

.article .callout-sources a {
  font-size: 15px;
  text-decoration: none;
}

.callout-sources .note {
  display: block;
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-steel);
}

.callout-tip {
  background: var(--kf-blueTint);
  border: 1px solid var(--kf-skyEdge);
  border-left: 4px solid var(--kf-accent);
}

.callout-tip .label { color: var(--kf-ink); }

.callout-caution {
  background: var(--kf-manilaTint);
  border: 1px solid var(--kf-manilaEdge);
  border-left: 4px solid var(--kf-manila);
}

.callout-caution .label { color: var(--kf-manilaDeep); }
.article .callout-caution p { color: var(--kf-manilaWord); }

/* Numbered steps, each on a cloud card with an optional screenshot. */
.article .steps {
  list-style: none;
  padding: 0;
  gap: var(--kf-space-three);
}

.article .steps > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-three);
  align-items: flex-start;
  padding: 18px;
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: 18px;
}

.step-n {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--kf-ink);
  color: var(--kf-surface);
  font-size: var(--kf-font-size-body);
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

.step-body {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.article .step-body h3 {
  font-size: var(--kf-font-size-subheading);
}

.article .step-body p {
  font-size: var(--kf-font-size-body);
  line-height: 1.6;
}

.article .steps img {
  flex: 0 0 140px;
  width: 140px;
  height: auto;
  border: 1px solid var(--kf-mist);
  border-radius: 8px;
}

/* The one promo block per article, placed after the reader feels the problem. */
.promo {
  background: var(--kf-blueTint);
  border: 1px solid var(--kf-skyEdge);
  border-radius: 18px;
  padding: var(--kf-space-four);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article .promo h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--kf-ink);
}

.article .promo p {
  font-size: var(--kf-font-size-body);
  line-height: 1.6;
  color: var(--kf-ink);
}

/* Buttons: primary (navy), quiet (white on line), and the promo's blue. */
.button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--kf-radius);
  background: var(--kf-ink);
  color: var(--kf-surface);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.article a.button {
  color: var(--kf-surface);
}

.button:hover,
.article a.button:hover {
  background: var(--blog-navy-hover);
  color: var(--kf-surface);
}

.button-quiet,
.article a.button-quiet {
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  color: var(--kf-ink);
}

.button-quiet:hover,
.article a.button-quiet:hover {
  background: var(--kf-surface);
  border-color: var(--kf-accent);
  color: var(--kf-ink);
}

/* The promo's and the side rail's store buttons wear the app's one gradient
   and its blue glow, as the end card and header do (owner, 2026-09-28: the
   website looks like the app; CTA panels are light blue). */
.promo .button,
.toc .button.store-cta,
.article .promo a.button {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #163A73 0%, #2457A6 60%, #2F8FEA 100%);
  box-shadow: 0 4px 12px rgba(88, 175, 255, 0.5);
  color: var(--kf-surface);
}

.promo .button {
  align-self: flex-start;
  min-width: 220px;
  padding: 14px 20px;
  text-align: center;
  font-size: var(--kf-font-size-body);
}

.promo .button:hover,
.toc .button.store-cta:hover,
.article .promo a.button:hover {
  background: linear-gradient(135deg, #163A73 0%, #2457A6 45%, #2F8FEA 100%);
  box-shadow: 0 6px 16px rgba(88, 175, 255, 0.6);
  color: var(--kf-surface);
}

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

/* Tables: always inside .table-scroll so wide ones scroll instead of pushing
   the page sideways on a phone. Navy header row. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.article table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 520px;
}

.article th {
  background: var(--kf-ink);
  color: var(--kf-surface);
  font-size: var(--kf-font-size-small);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
}

.article td {
  border-bottom: 1px solid var(--kf-line);
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-slate);
  vertical-align: top;
}

.article tr:last-child td {
  border-bottom: 0;
}

.article td:first-child {
  font-weight: 700;
  color: var(--kf-ink);
}

/* Kind tags in a dates table. */
.kind {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.kind-holiday { background: var(--kf-blueTint); color: var(--kf-ink); }
.kind-early { background: var(--kf-manilaTint); color: var(--kf-manilaDeep); }
.kind-deadline { background: var(--kf-errorLight); color: var(--blog-error-word); }
.kind-conference { background: var(--kf-successLight); color: var(--blog-success-word); }

/* The calendar-file row under a dates table. */
.file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: var(--kf-space-three);
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.file-row .what {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.file-row strong {
  font-size: var(--kf-font-size-body);
}

.file-row span {
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-steel);
}

/* FAQ: native details, so answers are in the HTML for crawlers. */
.article .faq {
  gap: 12px;
}

.faq details {
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
  padding: 15px 18px;
}

.faq summary {
  font-size: 17px;
  font-weight: 700;
  color: var(--kf-ink);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.article .faq details p {
  margin-top: 10px;
  font-size: var(--kf-font-size-body);
  line-height: 1.6;
}

/* Read next: the pillar hub and two siblings. */
.article .read-next {
  padding-top: var(--kf-space-two);
  border-top: 1px solid var(--kf-line);
}

.article .read-next h2 {
  font-size: 22px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.card,
.article a.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--kf-space-three);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
  text-decoration: none;
  font-weight: 600;
}

.card:hover {
  border-color: var(--kf-accent);
}

.card .kicker {
  font-size: 13px;
  font-weight: 700;
  color: var(--kf-steel);
}

.card .title {
  font-size: var(--kf-font-size-body);
  font-weight: 700;
  line-height: 1.35;
  color: var(--kf-ink);
}

.card .blurb {
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-slate);
}

.card time {
  font-size: 13px;
  font-weight: 700;
  color: var(--kf-steel);
}

/* ---- Hub (/blog) ---- */

.blog-wrap > .article {
  padding-bottom: 60px;
}

/* ---- Site header and footer (design system SiteHeader / SiteFooter) ----
   Stamped into blog pages from content-engine/templates/partials/. The
   classes are kf-* so the old .site-header and footer rules in /styles.css
   cannot reach them; the few element rules that still would are reset. */

.kf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kf-surface);
  border-bottom: 1px solid var(--kf-line);
}

.kf-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.kf-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  text-decoration: none;
}

.kf-brand:hover {
  text-decoration: none;
}

.kf-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}

.kf-brand > span {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--kf-ink);
}

.kf-brand > span > span {
  color: var(--kf-accent);
}

.kf-nav {
  display: flex;
  align-items: center;
  gap: var(--kf-space-one);
  flex-wrap: wrap;
  margin-left: auto;
}

.kf-nav a {
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kf-slate);
  text-decoration: none;
  white-space: nowrap;
}

.kf-nav a:hover {
  background: var(--kf-blueTint);
  color: var(--kf-ink);
  text-decoration: none;
}

/* The app's one gradient and its blue glow, as on the end-card button. */
.kf-nav a.kf-nav-cta {
  margin-left: var(--kf-space-two);
  padding: 10px 18px;
  border-radius: var(--kf-radius);
  background: linear-gradient(135deg, #163A73 0%, #2457A6 60%, #2F8FEA 100%);
  box-shadow: 0 4px 12px rgba(88, 175, 255, 0.5);
  color: var(--kf-surface);
}

.kf-nav a.kf-nav-cta:hover {
  background: linear-gradient(135deg, #163A73 0%, #2457A6 45%, #2F8FEA 100%);
  box-shadow: 0 6px 16px rgba(88, 175, 255, 0.6);
  color: var(--kf-surface);
}

/* The sticky header covers anchor targets otherwise. */
[id] {
  scroll-margin-top: 90px;
}

.toc {
  top: 88px;
}

footer.kf-footer {
  margin-top: 0;
  padding: 0;
  text-align: left;
  background: var(--kf-cloud);
  border-top: 1px solid var(--kf-line);
  color: var(--kf-steel);
  font-size: var(--kf-font-size-small);
}

.kf-footer-cols {
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 20px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--kf-space-five);
}

.kf-footer-cols > div,
.kf-footer-cols > nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.kf-footer .kf-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.kf-footer .kf-brand > span {
  font-size: 19px;
}

.kf-footer-brand p {
  margin: 0;
  max-width: 220px;
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  line-height: 1.55;
  color: var(--kf-steel);
}

.kf-badges {
  display: flex;
  gap: var(--kf-space-two);
  flex-wrap: wrap;
  margin-top: var(--kf-space-one);
}

footer.kf-footer .kf-badges a {
  margin: 0;
  line-height: 0;
}

.kf-badges img {
  height: 38px;
  width: auto;
  display: block;
}

.kf-footer-head {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kf-ink);
}

footer.kf-footer nav a {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--kf-slate);
  text-decoration: none;
}

footer.kf-footer nav a:hover {
  color: var(--kf-ink);
  text-decoration: underline;
}

.kf-footer-base {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 20px 36px;
  border-top: 1px solid var(--kf-line);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.kf-footer-base p {
  margin: 0;
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-steel);
}

/* ---- Roundup template (best X, X vs Y, pillar pages) ----
   From the design system's Roundup Article: picks, the one axis, a pinned
   comparison table, how we picked, ranked entries, what we left out. Wider
   than an article: no contents rail, the full 1120px column. */

.disclosure {
  margin: 0;
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  line-height: 1.55;
  color: var(--kf-steel);
}

.roundup {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-bottom: 60px;
}

.roundup h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--kf-ink);
}

.roundup p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--kf-slate);
}

.roundup p a,
.roundup td a {
  font-weight: 700;
  color: var(--kf-accent);
}

.roundup .note {
  font-size: var(--kf-font-size-body);
  color: var(--kf-steel);
}

.rs {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-three);
}

.picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  border-radius: 18px;
  text-decoration: none;
}

.pick:hover {
  border-color: var(--kf-accent);
  text-decoration: none;
}

.award {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--kf-manilaTint);
  color: var(--kf-manilaDeep);
  font-size: 12px;
  font-weight: 700;
}

.pick-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--kf-ink);
}

.pick-why {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-slate);
}

.pick-price {
  margin-top: auto;
  font-size: var(--kf-font-size-small);
  font-weight: 700;
  color: var(--kf-steel);
}

.axis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  background: var(--kf-ink);
  border-radius: 18px;
}

.axis .label {
  color: var(--kf-member-sky-fill);
}

.roundup .axis h2 {
  max-width: none;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--kf-surface);
}

.roundup .axis p {
  max-width: none;
  line-height: 1.6;
  color: var(--kf-blueTint);
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-two);
  align-items: center;
  padding: var(--kf-space-three);
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.jump span {
  padding-right: var(--kf-space-one);
  font-size: var(--kf-font-size-small);
  font-weight: 700;
  color: var(--kf-steel);
}

.roundup .jump a {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  font-size: var(--kf-font-size-small);
  font-weight: 700;
  color: var(--kf-accent);
  text-decoration: none;
}

.roundup .jump a:hover {
  border-color: var(--kf-accent);
  color: var(--kf-ink);
}

/* The comparison table: header row and app column both pinned, so a phone
   can scroll sideways and down without losing either. */
.compare-table {
  max-height: 70vh;
  margin: 0;
}

.compare-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 760px;
}

.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--kf-line);
  font-size: 15px;
  line-height: 1.45;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--kf-ink);
  color: var(--kf-surface);
  font-size: var(--kf-font-size-small);
  font-weight: 700;
}

.compare-table thead th:first-child {
  left: 0;
  z-index: 3;
  min-width: 170px;
}

.compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--kf-cloud);
  border-right: 1px solid var(--kf-line);
  font-weight: 700;
  color: var(--kf-ink);
}

.compare-table td {
  font-weight: 600;
  color: var(--kf-slate);
}

.compare-table td.axis-cell {
  font-weight: 700;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: 0;
}

.picked {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--kf-space-four);
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: 18px;
}

.roundup .picked h2 {
  font-size: clamp(22px, 2.6vw, 28px);
}

.roundup .picked p {
  font-size: var(--kf-font-size-body);
  line-height: 1.65;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.stats div {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-half);
}

.stats strong {
  font-size: var(--kf-font-size-section);
  font-weight: 800;
  color: var(--kf-ink);
}

.stats span {
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-steel);
}

.entry {
  overflow: hidden;
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  border-radius: 18px;
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  background: var(--kf-blueTint);
  border-bottom: 1px solid var(--kf-skyEdge);
}

.rank {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--kf-ink);
  color: var(--kf-surface);
  font-size: 18px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.entry-name {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.entry-name h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--kf-ink);
}

.entry-award {
  font-size: var(--kf-font-size-small);
  font-weight: 700;
  color: var(--kf-manilaDeep);
}

.entry-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--kf-slate);
}

.entry-body {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-three);
  padding: 20px;
}

.entry-answer {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-one);
  padding: 14px 16px;
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.entry-answer .label {
  font-size: 12px;
}

.roundup .entry-answer p {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--kf-ink);
}

.entry-main {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.entry-text {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.good-bad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.good-bad div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.good,
.bad {
  font-size: 13px;
  font-weight: 700;
}

.good { color: var(--blog-success-word); }
.bad { color: var(--blog-error-word); }

.roundup .good-bad p {
  font-size: 15px;
  line-height: 1.5;
}

/* Check ratings: a colored dot plus a word (never color alone). Used in an
   entry's scorecard (.checks), the key (.checks-key) and table cells. Text
   on each tint is 6.6:1 or better. */
.rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.rate::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.rate-yes { background: var(--kf-successLight); color: var(--kf-member-mint-text); }
.rate-yes::before { background: var(--kf-success); }
.rate-work { background: var(--kf-manilaTint); color: var(--kf-manilaWord); }
.rate-work::before { background: var(--kf-warning); box-shadow: inset 0 0 0 1px var(--kf-manilaDeep); }
.rate-no { background: var(--kf-errorLight); color: var(--kf-member-coral-text); }
.rate-no::before { background: var(--kf-error); }

.checks,
.checks-key {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.check {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.check-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kf-inkSoft);
}

.checks-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.checks-key li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kf-font-size-small);
  font-weight: 600;
  color: var(--kf-slate);
}

.compare-checks table { min-width: 960px; }
.compare-table .rate { margin-bottom: 4px; }
.rate-note { display: block; }

@media (min-width: 720px) {
  .checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.entry figure {
  flex: 0 1 200px;
  min-width: 160px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.entry figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--kf-mist);
  border-radius: 10px;
}

.entry figcaption {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-steel);
}

.excluded {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.excluded div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--kf-space-three);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.excluded strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--kf-ink);
}

.roundup .excluded p {
  font-size: 15px;
  line-height: 1.5;
}

.end-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: center;
  padding: 26px;
  background: var(--kf-blueTint);
  border: 1px solid var(--kf-skyEdge);
  border-radius: 18px;
}

.end-card > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.end-card h3 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--kf-ink);
}

.roundup .end-card p {
  font-size: var(--kf-font-size-body);
  line-height: 1.6;
}

.end-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--kf-space-one);
}

.end-card img {
  width: 100%;
  max-width: 200px;
  height: auto;
  justify-self: center;
  /* The app's backpack glow (radial-glow.tsx): KidsFoldr Blue at the
     center, alpha 0.62 * (1 - d)^2.2, gone before the edge, in a box about
     twice the mark. The padding holds the glow; the negative margin keeps
     the layout the mark's own size. */
  padding: 50px;
  margin: -50px;
  box-sizing: content-box;
  background: radial-gradient(closest-side,
    rgba(88, 175, 255, 0.62) 0%,
    rgba(88, 175, 255, 0.33) 25%,
    rgba(88, 175, 255, 0.135) 50%,
    rgba(88, 175, 255, 0.03) 75%,
    rgba(88, 175, 255, 0) 100%);
}

.roundup .read-next {
  padding-top: var(--kf-space-two);
  border-top: 1px solid var(--kf-line);
}

.roundup .read-next h2 {
  font-size: 22px;
}

/* ---- Review template (one product) ----
   From the design system's Review Article: the verdict box with its score,
   then the article with a contents rail. Shares .picked/.stats, .end-card,
   .award and the table styles with the roundup. */

.verdict {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--kf-space-four);
  margin-bottom: 36px;
  background: var(--kf-blueTint);
  border: 1px solid var(--kf-skyEdge);
  border-radius: 18px;
}

.verdict-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-three);
  align-items: flex-start;
  justify-content: space-between;
}

.verdict-top > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.verdict h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--kf-ink);
}

.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kf-space-half);
  flex-shrink: 0;
  padding: 16px 22px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.score strong {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--kf-ink);
}

.score span {
  font-size: 13px;
  font-weight: 700;
  color: var(--kf-steel);
}

.buy-skip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.buy-skip > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: var(--kf-space-three);
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
}

.buy { font-size: var(--kf-font-size-small); font-weight: 700; color: var(--blog-success-word); }
.skip { font-size: var(--kf-font-size-small); font-weight: 700; color: var(--blog-error-word); }

.buy-skip ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.buy-skip li {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-slate);
}

.verdict-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scores {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--kf-cloud);
  border: 1px solid var(--kf-line);
  border-radius: 18px;
}

.score-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.score-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--kf-font-size-body);
  font-weight: 700;
  color: var(--kf-ink);
}

.score-head span:last-child {
  color: var(--kf-slate);
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--kf-line);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: calc(var(--score, 0) * 10%);
  border-radius: 999px;
  background: var(--kf-accent);
}

.article .score-row p {
  font-size: var(--kf-font-size-small);
  line-height: 1.5;
  color: var(--kf-steel);
}

.specs {
  margin: 0;
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-card);
  overflow: hidden;
}

.specs div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr);
  border-bottom: 1px solid var(--kf-line);
}

.specs div:last-child {
  border-bottom: 0;
}

.specs dt {
  padding: 12px 14px;
  background: var(--kf-cloud);
  font-size: 15px;
  font-weight: 700;
  color: var(--kf-ink);
}

.specs dd {
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kf-slate);
}

.pros-cons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pros-cons > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--kf-radius-card);
}

.pros { background: var(--kf-successLight); border: 1px solid var(--blog-success-edge); }
.cons { background: var(--kf-errorLight); border: 1px solid var(--blog-error-edge); }

.pros-cons > div > span {
  font-size: 15px;
  font-weight: 700;
}

.pros > span { color: var(--blog-success-word); }
.cons > span { color: var(--blog-error-word); }

.article .pros-cons ul {
  list-style: none;
  padding: 0;
}

.article .pros li { font-size: 15px; line-height: 1.5; color: var(--blog-success-body); }
.article .cons li { font-size: 15px; line-height: 1.5; color: var(--blog-error-body); }

.article .picked p {
  font-size: var(--kf-font-size-body);
  line-height: 1.6;
}

.pull {
  margin: 0;
  padding-left: var(--kf-space-three);
  border-left: 3px solid var(--kf-accent);
}

.article .pull p {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kf-ink);
}

.h2-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--kf-mist);
  border-radius: 10px;
}

.alternatives .card {
  background: var(--kf-cloud);
}

.for-whom {
  font-size: 13px;
  font-weight: 700;
  color: var(--kf-manilaDeep);
}

.article .end-card p {
  font-size: var(--kf-font-size-body);
  line-height: 1.6;
}

/* The end card's two buttons are one size, and the store button wears the
   app's one gradient (plan-gradient.tsx: 135deg, #163A73 0%, #2457A6 60%,
   #2F8FEA 100%) with its blue glow under it (upgrade.tsx buttonGlow). */
.end-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.end-buttons .button {
  text-align: center;
  padding: 14px 18px;
  font-size: var(--kf-font-size-body);
}

.end-buttons .button:not(.button-quiet),
.article .end-buttons a.button:not(.button-quiet) {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #163A73 0%, #2457A6 60%, #2F8FEA 100%);
  color: var(--kf-surface);
  box-shadow: 0 4px 12px rgba(88, 175, 255, 0.5);
}

.end-buttons .button:not(.button-quiet):hover,
.article .end-buttons a.button:not(.button-quiet):hover {
  background: linear-gradient(135deg, #163A73 0%, #2457A6 45%, #2F8FEA 100%);
  box-shadow: 0 6px 16px rgba(88, 175, 255, 0.6);
}