/* The kidsfoldr.app landing page (site/index.html), and nothing else.

   Built on the KidsFoldr design system: every color is a --kf-* token from
   /ds/tokens.css, or a light tint of one of the ten family colors defined
   once below. Nunito comes from /ds/fonts.css. Load order:

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

   /styles.css still carries the shared header, mobile menu, footer and store
   badges, and its old home-page rules are scoped to body.home, which this
   page no longer uses. Light only, like the blog: the design system has no
   dark palette.

   The idea: the page is color-coded the way the app colors a family. Each
   outcome wears one family color (fill, text, and a light tint of the fill),
   from its card in the outcome index down to its own section band and the
   disc behind its screenshot. The navy-to-blue gradient appears only on the
   store buttons, as on the blog. */

/* Layout: one 1120px column (the blog's), splits of copy and a real app screenshot on a family-color disc, then a bento of the smaller outcomes. */
:root {
  color-scheme: light;

  --h-ink: var(--kf-ink);
  --h-text: var(--kf-slate);
  --h-quiet: var(--kf-steel);
  --h-line: var(--kf-line);
  --h-white: var(--kf-surface);
  --h-sky: var(--kf-blueTint);
  --h-sky-edge: var(--kf-skyEdge);
  --h-accent: var(--kf-accent);
  --h-manila: var(--kf-manila);

  /* The app's one gradient and its blue glow (blog.css, tools.css). */
  --h-grad: linear-gradient(135deg, #163A73 0%, #2457A6 60%, #2F8FEA 100%);
  --h-grad-hover: linear-gradient(135deg, #163A73 0%, #2457A6 45%, #2F8FEA 100%);
  --h-glow: 0 4px 12px rgba(88, 175, 255, 0.5);
  --h-glow-hover: 0 6px 16px rgba(88, 175, 255, 0.6);
  --h-shadow: 0 18px 40px rgba(22, 58, 115, 0.16);
  --h-shadow-soft: 0 8px 22px rgba(22, 58, 115, 0.1);

  /* Light tints of the ten family fills: section grounds. Same hues as the
     design system's member colors, mixed most of the way to white. */
  --tint-manila: var(--kf-manilaLight);
  --tint-sky: var(--kf-blueTint);
  --tint-mint: #ECF8F1;
  --tint-coral: #FEF2EE;
  --tint-lavender: #F4F1FD;
  --tint-peach: #FFF6EA;
  --tint-teal: #EAF8F8;
  --tint-rose: #FDF1F7;
  --tint-lime: #F6FAE8;
  --tint-slate: #F0F4FA;

  --font: var(--kf-font);
  --fs-display: clamp(40px, 6.2vw, 66px);
  --fs-h2: clamp(30px, 4.3vw, 46px);
  --fs-h3: clamp(22px, 2.4vw, 26px);
  --fs-lede: clamp(18px, 2vw, 20px);
  --fs-body: 17px;
  --fs-small: 14px;

  --wrap: 1120px;
  --gutter: 20px;
  --band: clamp(64px, 9vw, 112px);
}

/* Family color sets. A .c-* element wears the color; a .t-* section takes
   its tint as the ground. Both set the same four variables. */
.c-manila, .t-manila { --fill: var(--kf-member-manila-fill); --text: var(--kf-member-manila-text); --deep: var(--kf-member-manila-deep); --tint: var(--tint-manila); }
.c-sky, .t-sky { --fill: var(--kf-member-sky-fill); --text: var(--kf-member-sky-text); --deep: var(--kf-member-sky-deep); --tint: var(--tint-sky); }
.c-mint, .t-mint { --fill: var(--kf-member-mint-fill); --text: var(--kf-member-mint-text); --deep: var(--kf-member-mint-deep); --tint: var(--tint-mint); }
.c-coral, .t-coral { --fill: var(--kf-member-coral-fill); --text: var(--kf-member-coral-text); --deep: var(--kf-member-coral-deep); --tint: var(--tint-coral); }
.c-lavender, .t-lavender { --fill: var(--kf-member-lavender-fill); --text: var(--kf-member-lavender-text); --deep: var(--kf-member-lavender-deep); --tint: var(--tint-lavender); }
.c-peach, .t-peach { --fill: var(--kf-member-peach-fill); --text: var(--kf-member-peach-text); --deep: var(--kf-member-peach-deep); --tint: var(--tint-peach); }
.c-teal, .t-teal { --fill: var(--kf-member-teal-fill); --text: var(--kf-member-teal-text); --deep: var(--kf-member-teal-deep); --tint: var(--tint-teal); }
.c-rose, .t-rose { --fill: var(--kf-member-rose-fill); --text: var(--kf-member-rose-text); --deep: var(--kf-member-rose-deep); --tint: var(--tint-rose); }
.c-lime, .t-lime { --fill: var(--kf-member-lime-fill); --text: var(--kf-member-lime-text); --deep: var(--kf-member-lime-deep); --tint: var(--tint-lime); }
.c-slate, .t-slate { --fill: var(--kf-member-slate-fill); --text: var(--kf-member-slate-text); --deep: var(--kf-member-slate-deep); --tint: var(--tint-slate); }
/* The outcome index uses o-* for the same sets. */
.o-manila { --fill: var(--kf-member-manila-fill); --text: var(--kf-member-manila-text); --deep: var(--kf-member-manila-deep); --tint: var(--tint-manila); }
.o-sky { --fill: var(--kf-member-sky-fill); --text: var(--kf-member-sky-text); --deep: var(--kf-member-sky-deep); --tint: var(--tint-sky); }
.o-mint { --fill: var(--kf-member-mint-fill); --text: var(--kf-member-mint-text); --deep: var(--kf-member-mint-deep); --tint: var(--tint-mint); }
.o-lavender { --fill: var(--kf-member-lavender-fill); --text: var(--kf-member-lavender-text); --deep: var(--kf-member-lavender-deep); --tint: var(--tint-lavender); }
.o-teal { --fill: var(--kf-member-teal-fill); --text: var(--kf-member-teal-text); --deep: var(--kf-member-teal-deep); --tint: var(--tint-teal); }
.o-rose { --fill: var(--kf-member-rose-fill); --text: var(--kf-member-rose-text); --deep: var(--kf-member-rose-deep); --tint: var(--tint-rose); }
.o-coral { --fill: var(--kf-member-coral-fill); --text: var(--kf-member-coral-text); --deep: var(--kf-member-coral-deep); --tint: var(--tint-coral); }

/* ---- Base ---- */

body.landing {
  font-family: var(--font);
  background: var(--h-white);
  color: var(--h-text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}

.landing h1,
.landing h2,
.landing h3 {
  color: var(--h-ink);
  font-weight: 800;
  text-wrap: balance;
}

.landing h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.landing h3 {
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
}

.landing p {
  margin: 0;
}

.landing a:focus-visible,
.landing button:focus-visible {
  outline: 3px solid var(--h-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.landing .wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

[id] {
  scroll-margin-top: 84px;
}

.section-lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--h-text);
  max-width: 52ch;
}

/* ---- Header (the blog's look: white, sticky, a line under it). The nav
   items are the page's own, unchanged. ---- */

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

.landing .site-header {
  max-width: var(--wrap);
  padding: 12px var(--gutter);
}

.landing .site-header .brand {
  text-decoration: none;
}

.landing .site-header img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.landing .site-header .wordmark {
  font-size: 21px;
  letter-spacing: -0.2px;
}

.landing .site-header nav {
  gap: 4px;
}

.landing .site-header nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--h-text);
}

.landing .site-header nav a:hover {
  background: var(--h-sky);
  color: var(--h-ink);
  text-decoration: none;
}

@media (max-width: 600px) {
  .landing .site-header {
    padding: 10px 16px;
  }

  .landing .site-header nav {
    gap: 0;
  }

  .landing .site-header nav a {
    border-radius: 9px;
  }
}

/* ---- The store button: the app's one gradient with its blue glow ---- */

.store-button {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--kf-radius);
  background: var(--h-grad);
  box-shadow: var(--h-glow);
  color: var(--h-white);
  font-size: var(--kf-font-size-body);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.landing a.store-button {
  color: var(--h-white);
}

.store-button:hover,
.store-button:focus-visible {
  background: var(--h-grad-hover);
  box-shadow: var(--h-glow-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

.store-button-lg {
  font-size: 18px;
  padding: 17px 36px;
  min-width: 240px;
}

.landing .store-badges {
  justify-content: flex-start;
}

/* ---- Hero ---- */

.hero {
  position: relative;
  background:
    radial-gradient(60% 70% at 85% 35%, rgba(88, 175, 255, 0.28), rgba(88, 175, 255, 0) 70%),
    var(--h-sky);
  padding-block: clamp(36px, 6vw, 84px) clamp(56px, 8vw, 104px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.kicker {
  display: inline-block;
  margin-bottom: 18px !important;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--h-white);
  border: 1px solid var(--h-sky-edge);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--h-ink);
}

.landing h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--h-text);
  max-width: 34em;
}

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 30px;
}

/* The artifact: a flyer on its manila folder, the receipt KidsFoldr shows
   after the snap, and the two events it found. Paper is warm and tilted;
   what the app made of it is square and cool. */
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hero-backpack {
  position: absolute;
  left: -12%;
  bottom: -40px;
  width: clamp(120px, 15vw, 180px);
  height: auto;
  /* The app's backpack glow (radial-glow.tsx), as on the blog's end card. */
  padding: 40px;
  margin: -40px;
  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%);
  z-index: 3;
}

.flyer-stack {
  position: relative;
  width: min(100%, 420px);
  padding-bottom: 150px;
}

.flyer-stack::before {
  content: '';
  position: absolute;
  inset: -14px 12px auto -18px;
  height: 210px;
  background: var(--h-manila);
  border-radius: 14px 14px 5px 5px;
  transform: rotate(-6deg);
  box-shadow: var(--h-shadow-soft);
}

.flyer {
  position: relative;
  background: var(--h-white);
  border-radius: 5px;
  padding: 26px 26px 30px;
  transform: rotate(-2.5deg);
  box-shadow: var(--h-shadow);
}

.flyer-school {
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kf-member-sky-text);
  margin-bottom: 8px !important;
}

.flyer-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--h-ink);
  line-height: 1.15;
  margin-bottom: 14px !important;
}

.flyer-line {
  font-size: 14px;
  line-height: 1.6;
  color: var(--kf-inkMid);
  margin-bottom: 8px !important;
}

.flyer mark {
  background: linear-gradient(transparent 56%, rgba(243, 200, 115, 0.9) 56%);
  color: inherit;
  font-weight: 800;
  padding: 0 1px;
}

.flyer-rule {
  height: 7px;
  border-radius: 4px;
  background: var(--h-line);
  margin-top: 9px;
}

.flyer-rule.mid { width: 84%; }
.flyer-rule.short { width: 58%; }

.receipt {
  position: absolute;
  top: -58px;
  right: -18px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 250px;
  padding: 11px 14px;
  background: var(--h-white);
  border: 1px solid var(--h-line);
  border-radius: var(--kf-radius-card);
  box-shadow: var(--h-shadow-soft);
  font-size: 13px;
  line-height: 1.4;
  color: var(--h-text);
}

.receipt strong {
  color: var(--h-ink);
  font-weight: 800;
}

.receipt-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--kf-success);
  box-shadow: 0 0 0 4px var(--kf-successLight);
}

.events {
  position: absolute;
  right: -10px;
  bottom: 0;
  display: grid;
  gap: 10px;
  width: min(92%, 330px);
}

/* The app's event card, small: the day tile in the tagged kid's color,
   title and time, and the kid's chip. */
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--kf-cloud);
  border: 1px solid var(--h-line);
  border-radius: var(--kf-radius-card);
  box-shadow: var(--h-shadow-soft);
  animation: event-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.event:nth-child(1) { animation-delay: 0.3s; }
.event:nth-child(2) { animation-delay: 0.45s; }

@keyframes event-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.day-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 46px;
  border-radius: 12px;
  background: var(--kf-member-manila-fill);
  color: var(--kf-member-manila-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.day-tile b {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.event-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 12.5px;
  color: var(--h-text);
}

.event-text strong {
  font-size: 14px;
  color: var(--h-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kf-member-manila-fill);
  color: var(--kf-member-manila-text);
  font-size: 12px;
  font-weight: 700;
}

/* ---- Paper types strip ---- */

.paper-types {
  padding-block: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--h-line);
}

.strip-title {
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--h-quiet) !important;
  text-align: center;
  margin-bottom: 18px !important;
}

.type-chips {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
}

.type-chips li {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.ways-in {
  max-width: 46em;
  margin: 22px auto 0 !important;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--h-quiet);
}

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

.outcomes {
  padding-block: var(--band);
}

.outcomes .section-lede {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.outcome-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.outcome {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: 18px;
  background: var(--tint);
  border: 1px solid var(--fill);
  color: var(--h-text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.landing a.outcome:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--h-shadow-soft);
}

.outcome .tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--text);
}

.outcome .tile svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outcome strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--h-ink);
}

.outcome span:last-child {
  font-size: 15.5px;
  line-height: 1.5;
}

/* The seventh outcome, sharing, takes a full row so the grid stays even at
   three, two and one columns: tile on the left, words beside it. */
.outcome-wide {
  grid-column: 1 / -1;
}

.outcome-wide .outcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 2px;
  align-items: center;
}

.outcome-wide .outcome .tile {
  grid-row: 1 / 3;
  margin: 0;
}

.outcome-wide .outcome strong {
  align-self: end;
}

.outcome-wide .outcome span:last-child {
  align-self: start;
}

/* ---- Story sections: copy beside a real app screenshot ---- */

.story {
  background: var(--tint);
  padding-block: var(--band);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

.split-flip .split-copy {
  order: 2;
}

.split-flip .split-art {
  order: 1;
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.split-copy > p:not(.eyebrows):not(.features):not(.read-more) {
  font-size: var(--fs-body);
  line-height: 1.68;
  max-width: 34em;
}

.split-copy > p strong {
  color: var(--h-ink);
  font-weight: 800;
}

.split-copy h2 {
  margin-bottom: 2px;
}

.eyebrows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Feature names, after the outcome. */
.features {
  padding-top: 14px;
  border-top: 1px dashed var(--deep);
  font-size: 15px;
  line-height: 1.6;
  color: var(--h-ink);
  font-weight: 700;
}

.features-label {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.read-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.read-more a {
  font-size: 16px;
  font-weight: 800;
  color: var(--h-ink);
  text-decoration: underline;
  text-decoration-color: var(--deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.read-more a::after {
  content: ' \2192';
}

.read-more a:hover {
  text-decoration-color: var(--h-ink);
}

.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.tool-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.6;
}

.tool-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 0 0 2px var(--deep);
}

.tool-list strong {
  color: var(--h-ink);
  font-weight: 800;
}

/* A screenshot on a disc of its section's family color. */
.shot {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  padding-block: 28px;
  min-width: 0;
}

.shot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 480px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--fill);
}

.shot img {
  position: relative;
  width: min(100%, 290px);
  height: auto;
  border-radius: 36px;
  border: 6px solid var(--h-ink);
  box-shadow: var(--h-shadow);
  background: var(--h-white);
}

/* Two screenshots on one disc: the front one lower and to the right,
   overlapping the one behind it. */
.shot-pair {
  padding-block: 40px;
}

.shot-pair img {
  width: min(52%, 250px);
}

.shot-pair .shot-back {
  margin-right: -14%;
  transform: translateY(-36px);
}

.shot-pair .shot-front {
  z-index: 1;
  transform: translateY(36px);
}

.shot-manila { --fill: var(--kf-member-manila-fill); }
.shot-lavender { --fill: var(--kf-member-lavender-fill); }
.shot-sky { --fill: var(--kf-member-sky-fill); }
.shot-mint { --fill: var(--kf-member-mint-fill); }
.shot-coral { --fill: var(--kf-member-coral-fill); }
.shot-lime { --fill: var(--kf-member-lime-fill); }
.shot-peach { --fill: var(--kf-member-peach-fill); }

/* Sharing has no approved app screenshot yet, so its disc holds a drawn
   example instead: who it is shared with, and what each person gets. White
   cards in the family's own tile style, plainly not a phone. */
.share-stack {
  position: relative;
  width: min(100%, 360px);
  display: grid;
  gap: 12px;
}

.landing .share-from {
  justify-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--h-white);
  border: 1px solid var(--h-line);
  box-shadow: var(--h-shadow-soft);
  font-size: 13px;
  font-weight: 800;
  color: var(--h-ink);
}

.share-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  padding: 14px;
  background: var(--h-white);
  border: 1px solid var(--h-line);
  border-radius: var(--kf-radius-card);
  box-shadow: var(--h-shadow);
}

.share-person:nth-of-type(2) { transform: translateX(18px); }
.share-person:nth-of-type(3) { transform: translateX(-10px); }

.share-person .tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.share-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  color: var(--h-text);
}

.share-who strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--h-ink);
}

.share-gets {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kf-cloud);
  border: 1px solid var(--h-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--h-ink);
  white-space: nowrap;
}

/* A folder chip gets a little manila folder, a calendar or event chip a
   little day tile: the two things that get shared. */
.chip::before {
  content: '';
  flex: none;
  width: 11px;
  height: 9px;
  border-radius: 2px 3px 2px 2px;
  background: var(--kf-member-manila-fill);
  box-shadow: inset 0 0 0 1.2px var(--kf-member-manila-deep);
}

.chip-cal::before,
.chip-event::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--kf-member-sky-fill);
  box-shadow: inset 0 2.5px 0 var(--kf-member-sky-deep), inset 0 0 0 1.2px var(--kf-member-sky-deep);
}

/* ---- Mid-page CTA ---- */

.mid-cta {
  padding-block: clamp(40px, 6vw, 64px) 0;
}

.panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 4vw, 40px);
  background: var(--h-sky);
  border: 1px solid var(--h-sky-edge);
  border-radius: 18px;
}

.panel-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--h-ink);
}

/* ---- The rest of the backpack: bento ---- */

.more {
  padding-block: var(--band);
}

.more .section-lede {
  margin-bottom: clamp(28px, 4vw, 44px);
}

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

.card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 22px;
  background: var(--tint);
  border: 1px solid var(--fill);
  min-width: 0;
  overflow: hidden;
}

.card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.card-copy > p:not(.features):not(.read-more) {
  font-size: 16.5px;
  line-height: 1.65;
}

.card-copy .features {
  align-self: stretch;
}

/* The screenshot shows its top: the part that makes the point. */
.card-shot {
  position: relative;
  margin: auto calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px));
  padding: 26px 24px 0;
  height: 340px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: var(--fill);
}

.card-shot img {
  width: min(78%, 270px);
  height: auto;
  align-self: flex-start;
  border-radius: 30px 30px 0 0;
  border: 6px solid var(--h-ink);
  border-bottom: 0;
  box-shadow: var(--h-shadow);
  background: var(--h-white);
}

.card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.card-wide .card-shot {
  margin: calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px)) 0;
  height: auto;
  min-height: 420px;
  padding: 36px 24px 0;
  align-self: stretch;
}

.card-wide .card-shot img {
  width: min(86%, 280px);
}

/* Family tiles, flat, initial in the member's text color (brand kit 7). */
.family {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.family li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--h-white);
  border: 1px solid var(--h-line);
  border-radius: var(--kf-radius-card);
  font-size: 16px;
  font-weight: 700;
  color: var(--h-ink);
}

.family .tile {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--text);
  font-weight: 800;
  font-size: 18px;
}

.family small {
  font-size: 13px;
  font-weight: 600;
  color: var(--h-text);
}

.places {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.places li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--h-white);
  border: 1px solid var(--h-line);
  border-radius: var(--kf-radius-card);
  font-size: 16px;
  font-weight: 700;
  color: var(--h-ink);
}

.places li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.places small {
  font-size: 13px;
  font-weight: 600;
  color: var(--h-text);
}

.place-dot {
  flex: none;

  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kf-success);
  box-shadow: 0 0 0 4px var(--kf-successLight);
}

/* ---- Closing: the blog's end card, light blue, backpack on its glow ---- */

.closing {
  padding-block: var(--band);
}

.end-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  background: var(--h-sky);
  border: 1px solid var(--h-sky-edge);
  border-radius: 24px;
  overflow: hidden;
}

.end-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.end-copy h2 {
  margin: 0;
}

.end-copy > p:not(.store-badges) {
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 30em;
  margin-bottom: 8px;
}

.end-backpack {
  width: 100%;
  max-width: 220px;
  height: auto;
  justify-self: center;
  padding: 56px;
  margin: -56px;
  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%);
}

/* ---- Footer (same links; the blog's quiet ground) ---- */

.landing footer {
  background: var(--kf-cloud);
  border-top: 1px solid var(--h-line);
  color: var(--h-quiet);
  padding: 28px var(--gutter) 36px;
}

.landing footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 4px;
  margin-bottom: 10px;
}

.landing footer a {
  color: var(--h-text);
  padding: 4px 8px;
  margin: 0;
}

.landing footer p {
  margin: 0;
}

/* ---- Responsive ---- */

@media (max-width: 960px) {
  .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .hero-grid,
  .split,
  .card-wide,
  .end-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Copy first on a phone: the headline is the hook, the picture the proof. */
  .split-flip .split-copy,
  .split .split-copy {
    order: 1;
  }

  .split-flip .split-art,
  .split .split-art {
    order: 2;
  }

  .hero-art {
    margin-top: 12px;
  }

  .card-wide .card-shot {
    margin: 0 calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px));
    min-height: 0;
    height: 340px;
    padding-top: 26px;
  }

  .end-backpack {
    max-width: 170px;
  }
}

@media (max-width: 700px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 16px;
  }

  .outcome-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .outcome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px;
  }

  .outcome .tile {
    grid-row: 1 / 3;
    margin: 0;
  }

  .store-button-lg {
    min-width: 0;
    width: 100%;
  }

  .cta-block {
    align-items: stretch;
  }

  .landing .store-badges {
    justify-content: center;
  }

  .type-chips li {
    font-size: 14px;
    padding: 7px 13px;
  }

  .shot img {
    width: min(78%, 270px);
  }

  .shot-pair img {
    width: min(54%, 220px);
  }

  .shot-pair .shot-back {
    transform: translateY(-24px);
  }

  .shot-pair .shot-front {
    transform: translateY(24px);
  }

  .shot::before {
    width: 92%;
  }

  .share-person:nth-of-type(2),
  .share-person:nth-of-type(3) {
    transform: none;
  }
}

@media (max-width: 440px) {
  /* The events and the receipt stop hanging off the flyer and stack under
     it, or they cover its text. */
  .flyer-stack {
    padding-bottom: 0;
  }

  .receipt,
  .events {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 14px;
  }

  .receipt {
    margin-top: 22px;
  }

  .hero-backpack {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event {
    animation: none;
  }

  .store-button,
  .outcome {
    transition: none;
  }

  .store-button:hover,
  .landing a.outcome:hover {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Seven outcomes, all one size: a wrapping row that centers the last line
   (owner, 2026-10-06: "Everyone in the loop should size the same"). */
.outcome-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.outcome-grid > li {
  flex: 0 1 calc((100% - 32px) / 3);
  min-width: 0;
}
@media (max-width: 960px) {
  .outcome-grid > li { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 880px) {
  .outcome-grid > li { flex-basis: 100%; }
}