/*
 * The landing page's stylesheet, shared by index.html and faq.html. It used to live inline
 * in index.html; it moved out the day the site grew a second page.
 */
/* The app's own tokens, so the page and the product are one colour story. */
:root {
  --brand-50: #eefaf7;
  --brand-100: #d3f2ea;
  --brand-200: #a9e5d7;
  --brand-500: #17948a;
  --brand-600: #0f766e;
  --brand-700: #0f5f59;
  --brand-900: #0f4c47;
  --ink: #16211f;
  --muted: #5d716c;
  --line: #e3e9e7;
  --canvas: #f4f7f6;
  --spend-ink: #92400e;
  --spend-fill: #d97706;
  --spend-bg: #fff8ed;
  --invest-ink: #0f766e;
  --invest-fill: #0f9488;
  --invest-bg: #effbf7;
  --give-ink: #9d174d;
  --give-fill: #db2777;
  --give-bg: #fff1f5;
  --radius: 24px;
  --max: 1040px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Rubik,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.money {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ------------------------------------------------------------------ header */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brand-900);
  color: #fff;
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
}

/* The logo and the name, one link home; the same row the two were before they became one. */
.top .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.top img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
}

.top .name {
  font-weight: 700;
  font-size: 20px;
}

.top nav {
  margin-inline-start: auto;
  display: flex;
  gap: 4px;
}

.top nav a {
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
}

.top nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.top nav .login {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/*
 * The menu button. Three spans rather than an icon: nothing is fetched to draw it, and it
 * becomes an X by moving them. Drawn only below the breakpoint, where the nav has folded.
 */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.12);
  cursor: pointer;
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: #ffffff;
  transition:
    transform 0.2s ease,
    opacity 0.15s ease;
}

/* Open: the outer two meet in the middle and cross, the middle one goes. */
.top.open .burger span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.top.open .burger span:nth-child(2) {
  opacity: 0;
}

.top.open .burger span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .burger {
    display: flex;
  }

  /* The panel is out of flow below here, so the sign-up is what reaches for the far end. */
  .top .signup {
    margin-inline-start: auto;
  }

  /*
   * The row becomes a panel hanging off the bottom edge of the bar. `.top` is sticky and
   * therefore already a positioned box, so this hangs off it without anything else moving.
   */
  .top nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 6px 20px 14px;
    background: var(--brand-900);
    box-shadow: 0 12px 20px rgb(0 0 0 / 0.18);
  }

  .top.open nav {
    display: flex;
  }

  /* A row in a list, not a pill in a strip: full width, and big enough for a thumb. */
  .top nav a {
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 16px;
  }

  .top nav .login {
    margin-top: 4px;
  }
}

/* Two words is all there is room for beside the logo and the button on a small phone. */
@media (max-width: 340px) {
  .top .name {
    display: none;
  }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--brand-600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-700);
}

.btn-light {
  background: #fff;
  color: var(--brand-900);
}

.btn-light:hover {
  background: var(--brand-50);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-dark {
  background: var(--brand-900);
  color: #fff;
}

.btn-dark:hover {
  background: var(--brand-700);
}

/* ------------------------------------------------------------------ hero */
.hero {
  background: var(--brand-900);
  color: #fff;
  padding: 56px 0 72px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.hero .lede {
  margin-top: 18px;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 34ch;
}

.hero .actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero .soon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

/* Three short reassurances under the buttons; the long form is the "not" section. */
.trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.trust li::before {
  content: '✓';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-200);
  color: var(--brand-900);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.trust li + li {
  margin-inline-start: 6px;
}

@media (max-width: 860px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ phone mock */
.phone {
  width: 300px;
  margin-inline: auto;
  background: #fff;
  color: var(--ink);
  border-radius: 36px;
  padding: 14px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 0 0 8px #1b2b29,
    0 0 0 10px #2d403d;
}

.phone .screen {
  background: var(--canvas);
  border-radius: 24px;
  overflow: hidden;
  min-height: 520px;
}

.phone .bar {
  background: var(--brand-900);
  color: #fff;
  padding: 16px 16px 12px;
  font-size: 13px;
}

.phone .bar b {
  display: block;
  font-size: 17px;
}

.phone .body {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
}

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

.task .ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-50);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: none;
}

.task .t {
  flex: 1;
  min-width: 0;
}

.task .t b {
  display: block;
  font-size: 14px;
}

.task .t span {
  font-size: 12px;
  color: var(--muted);
}

.task .did {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  flex: none;
}

.task .done {
  background: var(--brand-100);
  color: var(--brand-900);
}

.gate {
  font-size: 12px;
  background: #fff8ed;
  color: #92400e;
  padding: 8px 12px;
  border-radius: 12px;
}

.jars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.jar {
  border-radius: 16px;
  padding: 10px 6px;
  text-align: center;
  border: 1px solid var(--line);
}

.jar small {
  display: block;
  font-size: 11px;
}

.jar .money {
  font-size: 18px;
  display: block;
}

.jar .pct {
  font-size: 10px;
  opacity: 0.7;
}

.spend {
  background: var(--spend-bg);
  color: var(--spend-ink);
}

.invest {
  background: var(--invest-bg);
  color: var(--invest-ink);
}

.give {
  background: var(--give-bg);
  color: var(--give-ink);
}

.splitbar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.splitbar i {
  display: block;
  height: 100%;
}

/* The smaller phones of the "sides" pair, and the pieces the child's and parent's screens add. */
.phone.small {
  width: 260px;
  padding: 10px;
  border-radius: 30px;
  box-shadow:
    0 20px 40px rgba(15, 76, 71, 0.18),
    0 0 0 6px #1b2b29,
    0 0 0 8px #2d403d;
}

.phone.small .screen {
  min-height: 440px;
}

.phone .tabs,
.phone .chips {
  display: flex;
  gap: 6px;
  font-size: 12px;
}

.phone .tabs span,
.phone .chips span {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}

.phone .tabs span.on,
.phone .chips span.on {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
  font-weight: 600;
}

.phone .tabs {
  justify-content: space-between;
}

.phone .tabs span {
  flex: 1;
  text-align: center;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.goal .splitbar {
  margin-top: 8px;
  height: 8px;
}

.hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.pay {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  white-space: nowrap;
}

.task.idea {
  background: #fffbeb;
  border-color: #fde68a;
}

.task.idea .ico {
  background: #fef3c7;
}

.verdict {
  display: flex;
  gap: 4px;
  flex: none;
}

.verdict i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
}

.verdict .ok {
  color: #047857;
}

.verdict .no {
  color: var(--muted);
}

.gate.open {
  background: var(--brand-50);
  color: var(--brand-700);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.paid {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: #047857;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------ sections */
section {
  padding: 72px 0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-600);
  margin-bottom: 8px;
}

h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}

.sub {
  margin-top: 12px;
  font-size: 17px;
  color: var(--muted);
  max-width: 60ch;
}

.steps {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 26px;
  display: flex;
  flex-direction: column;
}

/* The screen a step happens on: the phone's body without the phone, small enough for three in a row. */
.mini {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  flex: 1;
  align-content: start;
  color: var(--ink);
}

.mini .bar {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 4px;
}

.mini .card {
  padding: 10px 12px;
}

.mini .task .ico {
  width: 32px;
  height: 32px;
  font-size: 17px;
}

.mini .task .t b {
  font-size: 13px;
}

.mini .task .t span {
  font-size: 11px;
}

.mini .gate {
  font-size: 11px;
}

.mini .is-tap {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.mini .jar {
  padding: 8px 4px;
}

.mini .jar .money {
  font-size: 15px;
}

.step .n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-900);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

.step h3 {
  font-size: 19px;
  font-weight: 600;
}

.step p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/*
 * card section: three prepaid cards, drawn as the app draws them (prepaid-card.component.ts) —
 * a palette and the issuer's name, no logo. A card's face reads left to right whatever the
 * page's direction, so each is dir=ltr by its own rule rather than by the markup.
 */
.wallet {
  position: relative;
  height: 232px;
  max-width: 420px;
  margin: 32px auto 0;
}

.pcard {
  --face: #fff;
  --a: #dbeefa;
  --b: #d6f3ec;
  --ink: #16211f;
  --edge: #d3dbe0;
  direction: ltr;
  position: absolute;
  top: 10px;
  left: 50%;
  width: 250px;
  aspect-ratio: 1.586;
  margin-left: -125px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--edge);
  background: var(--face);
  color: var(--ink);
  box-shadow: 0 10px 24px rgb(15 76 71 / 0.1);
}

.pcard.isracard {
  --a: #ebe9fd;
  --b: #fdeedd;
  --ink: #1b1b2a;
  --edge: #d9d7e6;
}

.pcard.cal {
  --face: #eef4fb;
  --a: #d3e4f6;
  --b: #e4eefa;
  --ink: #0c2f55;
  --edge: #cfdced;
}

.pcard .s {
  position: absolute;
  rotate: 35deg;
}

/* Sized off the card, so a narrow card on a phone wears the same pattern as a wide one. */
.pcard .s.a {
  width: 56%;
  aspect-ratio: 1;
  top: -34%;
  right: -12%;
  border-radius: 27%;
  background: var(--a);
}

.pcard .s.b {
  width: 42%;
  aspect-ratio: 1;
  bottom: -40%;
  left: 16%;
  border-radius: 29%;
  background: var(--b);
}

.pcard .issuer {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 19px;
  font-weight: 700;
}

.pcard .chip {
  position: absolute;
  top: 38%;
  left: 16px;
  width: 32px;
  height: 24px;
  border-radius: 6px;
  background: #d6d3c9;
}

.pcard .holder {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Not .kind: that name already belongs to the task-kind tiles, and it brought their background. */
.pcard .ptype {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 11px;
  opacity: 0.7;
}

.pcard.back-l {
  translate: -70px 0;
  rotate: -9deg;
}

.pcard.back-r {
  translate: 70px 0;
  rotate: 9deg;
}

/* The front card covers the left of the one behind it on the right, where its name would be. */
.pcard.back-r .issuer {
  left: auto;
  right: 16px;
}

/* Lower than the two behind it by a line, so their names show above it at any width. */
.pcard.front {
  top: 50px;
}

.wallet .waiting {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--spend-bg);
  color: var(--spend-ink);
  border: 1px solid #f3dcb8;
  font-size: 14px;
  font-weight: 600;
}

.wallet-note {
  margin: 14px auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.wallet-note small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}

@media (max-width: 420px) {
  .pcard {
    width: 210px;
    margin-left: -105px;
  }

  .pcard.back-l {
    translate: -48px 0;
  }

  .pcard.back-r {
    translate: 48px 0;
  }

  .wallet {
    height: 206px;
  }
}

/* jars section: the week's ₪50 landing in the child's three jars, then what each one teaches */
.split {
  margin-top: 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 20px;
}

/* The cupboard from the jars page: dark wall, the jars standing on a board along its bottom edge. */
.cupboard {
  background: var(--brand-900);
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding-top: 22px;
}

.split .in {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.split .in .money {
  font-size: 30px;
  color: #fff;
}

.jars3 {
  margin: 18px auto 0;
  max-width: 520px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 8px;
}

.jar3 {
  position: relative;
  background: none;
  width: 30%;
  max-width: 132px;
  padding-top: 8px;
}

.jar3 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
}

.jar3.spend {
  --jar-fill: var(--spend-fill);
  --jar-ink: var(--spend-ink);
}

.jar3.invest {
  --jar-fill: var(--invest-fill);
  --jar-ink: var(--invest-ink);
}

.jar3.give {
  --jar-fill: var(--give-fill);
  --jar-ink: var(--give-ink);
}

.sticker {
  font-family: 'Amatic SC', Rubik, cursive;
  font-weight: 700;
  font-size: 24px;
}

/*
 * The liquid is a full glass slid down by what is missing: 98 viewBox units is the inside of
 * the glass, --level the share of the week in this jar. It rises slowly once the coins have
 * started landing, each jar a beat after the one before.
 */
.liquid {
  transform: translateY(calc((1 - var(--level)) * 98px));
  transition: transform 2.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.5s + var(--i) * 0.18s);
}

.split.armed:not(.seen) .liquid {
  transform: translateY(98px);
}

/* Payday's coins, from the total into each jar, fading as they land so the liquid is what is left of them. */
.coin {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #b45309;
  background: #fcd34d;
  color: #78350f;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

.split.seen .coin {
  animation: coin-drop 1.4s cubic-bezier(0.4, 0, 0.6, 1) both;
}

.coin:nth-child(1) {
  animation-delay: calc(var(--i) * 0.16s);
}

.coin:nth-child(2) {
  animation-delay: calc(0.28s + var(--i) * 0.16s);
}

.coin:nth-child(3) {
  animation-delay: calc(0.56s + var(--i) * 0.16s);
}

@keyframes coin-drop {
  from {
    opacity: 0;
    transform: translateY(-90px) scale(0.6);
  }
  15% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

.board {
  height: 14px;
  background: linear-gradient(#a97a52, #8a5f3d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

/* Each jar's figure under it, in its own colour, as under the shelf in the app. */
.figures {
  margin: 12px auto 0;
  max-width: 520px;
  display: flex;
  justify-content: space-around;
  padding: 0 8px;
}

.figures div {
  width: 30%;
  max-width: 132px;
  text-align: center;
  background: none;
  display: grid;
}

.figures .money {
  font-size: 22px;
}

.figures span {
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 480px) {
  .split {
    padding: 10px 10px 16px;
  }

  .figures .money {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid {
    transition: none;
  }

  .split.seen .coin {
    animation: none;
  }
}

.tiles {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tile {
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--line);
}

.tile .big {
  font-size: 40px;
  line-height: 1;
}

.tile h3 {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
}

.tile p {
  margin-top: 8px;
  font-size: 15px;
}

@media (max-width: 860px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}

/* sides: the child's phone and the parent's, side by side */
.pair {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 24px 28px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.side .phone {
  margin-bottom: 26px;
}

.side h3 {
  font-size: 22px;
  font-weight: 700;
}

.side ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 15px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .pair {
    grid-template-columns: 1fr;
  }
}

/* ages: six radios, a row of labels, one card showing — no script */
.ages {
  margin-top: 32px;
  position: relative;
}

.age-in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.age-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.age-tabs .q {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-inline-end: 6px;
}

.age-tabs label {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.age-tabs label:hover {
  background: var(--brand-50);
}

.age-panels {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.age {
  display: none;
}

.age h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--brand-900);
  line-height: 1.35;
}

.age p {
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink);
  max-width: 70ch;
}

.age-more {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

#age-1:checked ~ .age-panels .age[data-age='1'],
#age-2:checked ~ .age-panels .age[data-age='2'],
#age-3:checked ~ .age-panels .age[data-age='3'],
#age-4:checked ~ .age-panels .age[data-age='4'],
#age-5:checked ~ .age-panels .age[data-age='5'],
#age-6:checked ~ .age-panels .age[data-age='6'] {
  display: block;
}

#age-1:checked ~ .age-tabs label[for='age-1'],
#age-2:checked ~ .age-tabs label[for='age-2'],
#age-3:checked ~ .age-tabs label[for='age-3'],
#age-4:checked ~ .age-tabs label[for='age-4'],
#age-5:checked ~ .age-tabs label[for='age-5'],
#age-6:checked ~ .age-tabs label[for='age-6'] {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
}

/* Keyboard: the arrows move between radios; the focused one's label shows the ring. */
#age-1:focus-visible ~ .age-tabs label[for='age-1'],
#age-2:focus-visible ~ .age-tabs label[for='age-2'],
#age-3:focus-visible ~ .age-tabs label[for='age-3'],
#age-4:focus-visible ~ .age-tabs label[for='age-4'],
#age-5:focus-visible ~ .age-tabs label[for='age-5'],
#age-6:focus-visible ~ .age-tabs label[for='age-6'] {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .age-tabs .q {
    flex-basis: 100%;
    margin: 0;
  }

  .age-tabs label {
    padding: 7px 12px;
    font-size: 14px;
  }

  .age-panels {
    padding: 22px 20px;
  }
}

/* not */
.not {
  background: var(--brand-900);
  color: #fff;
}

.not .eyebrow {
  color: var(--brand-200);
}

.not .sub {
  color: rgba(255, 255, 255, 0.78);
}

.nots {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.nots div {
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.nots strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.nots p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 860px) {
  .nots {
    grid-template-columns: 1fr;
  }
}

/* pricing — the two plans of docs/spec.md section 4i, said the way the FAQ says them */
.plans {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}

.plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

/* Both plans on the same footing: the free one is the whole loop, not a demo, and it is the one most families start on. */
.plan .btn {
  margin-top: auto;
  align-self: stretch;
}

.plan ul {
  padding-bottom: 22px;
}

.plan .tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: 12px;
}

.plan.family .tag {
  background: var(--brand-900);
  color: #fff;
}

.plan h3 {
  font-size: 22px;
}

.plan .price {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.plan .price .money {
  font-size: 36px;
  line-height: 1.1;
  color: var(--brand-900);
}

.plan .price span:not(.money) {
  color: var(--muted);
  font-size: 15px;
}

.plan .for {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

.plan ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 15px;
}

.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.plan li::before {
  content: '✓';
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand-500);
}

.plan.family li.plus::before {
  content: '+';
}

.plan .keeps {
  margin-top: 0;
  padding-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.founders {
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: grid;
  gap: 6px;
}

.founders strong {
  color: var(--brand-900);
  font-size: 17px;
}

.founders p {
  font-size: 15px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* faq */
.faq-list {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

details {
  border-top: 1px solid var(--line);
}

details:first-child {
  border-top: 0;
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

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

summary::after {
  content: '';
  margin-inline-start: auto;
  width: 10px;
  height: 10px;
  /* Physical sides on purpose: right + bottom rotated 45° points down in either direction. */
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}

details[open] summary::after {
  transform: rotate(-135deg);
}

details .a {
  padding: 0 22px 20px;
  color: var(--ink);
  font-size: 15px;
}

details .a p + p {
  margin-top: 10px;
}

.more {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}

/* cta */
.cta {
  text-align: center;
}

.cta .box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 24px;
}

.cta .actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* footer */
footer {
  padding: 32px 0 40px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
}

footer a {
  color: var(--muted);
}

footer .grow {
  flex: 1;
}

/* faq.html: the whole FAQ as a page of its own, on the same bones as the section above. */
.faq-page .sub {
  max-width: 640px;
}

.faq-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.faq-groups a {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-700);
  text-decoration: none;
}

.faq-page h3 {
  margin-top: 44px;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-900);
  scroll-margin-top: 80px;
}

.faq-page .faq-list {
  margin-top: 14px;
}

.faq-page details {
  scroll-margin-top: 80px;
}

/* The question a link brought the reader to, once it has been opened for them. */
.faq-page details:target summary {
  color: var(--brand-700);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------ the merged page's additions */
/* The one sign-up button of the whole page, in the header too. */
.top .signup {
  /*
   * Written out rather than inherited: this used to sit inside the nav and take the padding,
   * the radius and the missing underline from `.top nav a`. It stands outside it now, so that
   * it can stay on the bar while the nav folds away behind the button.
   */
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  background: #fff;
  color: var(--brand-900);
  font-weight: 600;
  margin-inline-start: 4px;
}

.top .signup:hover {
  background: var(--brand-50);
  color: var(--brand-900);
}

/* What this is, in one label above the headline. */
.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--brand-200);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero .aside {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.phone-wrap {
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* Said under every phone that is drawn rather than photographed. */
.phone-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* A duty's tick: a checklist mark for a thing done because we are a family, not for money. */
.task .tick {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid var(--brand-500);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-700);
  flex: none;
}

.task .locked {
  background: var(--line);
  color: var(--muted);
}

/* The wizard's slider of the first step: a task picked, a price set. */
.mini .pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.mini .pick .sl {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
}

.mini .pick .sl i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 55%;
  border-radius: 999px;
  background: var(--brand-500);
}

.mini .pick .sl i::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-500);
  transform: translateY(-50%);
}

/* One line after the three steps: the talk the payday makes room for. */
.after {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-900);
}

.tile h3 small {
  display: block;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
}

/* approach: the three kinds, the payday questions, and the ages under them */
.approach {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kinds {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.kind {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 22px;
}

.kind .tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.kind.duty .tag {
  background: var(--line);
  color: var(--ink);
}

.kind.base .tag {
  background: var(--brand-100);
  color: var(--brand-900);
}

.kind.extra .tag {
  background: var(--spend-bg);
  color: var(--spend-ink);
}

.kind strong {
  display: block;
  font-size: 19px;
  color: var(--brand-900);
}

.kind p {
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
}

.talk-line {
  margin-top: 16px;
  padding: 16px 22px;
  border-radius: 20px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 15px;
}

.talk-line strong {
  color: var(--brand-900);
  margin-inline-end: 4px;
}

.talk-line span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--brand-100);
  color: var(--brand-900);
  font-weight: 500;
}

.approach .ages {
  margin-top: 36px;
}

.approach .age-panels {
  background: var(--canvas);
}

.approach-link {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 20px;
  border: 1px dashed var(--brand-200);
  font-size: 16px;
  color: var(--brand-900);
  font-weight: 500;
}

.btn-outline {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand-900);
}

.btn-outline:hover {
  background: var(--brand-50);
}

@media (max-width: 860px) {
  .kinds {
    grid-template-columns: 1fr;
  }
}

.sides-note {
  margin-top: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-900);
}

/* founders */
.about {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.founders-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--canvas);
  border: 1px solid var(--line);
}

/*
 * A photograph, where it used to be an initial in a circle. Sized and cropped here rather
 * than trusted to the file: the source is square, and `cover` means a replacement that is
 * not stays a circle instead of an oval.
 */
.founder .avatar {
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand-900);
}

.founder strong {
  font-size: 18px;
  color: var(--brand-900);
}

.founder span:not(.avatar) {
  font-size: 14.5px;
  color: var(--muted);
}

.about-text {
  margin-top: 22px;
  max-width: 68ch;
  font-size: 16px;
}

.about-text p + p {
  margin-top: 10px;
  font-weight: 500;
  color: var(--brand-900);
}

@media (max-width: 720px) {
  .founders-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ articles */
/* The index: one card per article, newest first. */
.articles-page .sub {
  max-width: 640px;
}

.article-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.article-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: border-color 0.15s ease;
}

.article-card:hover {
  border-color: var(--brand-500);
}

.article-card .meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.article-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-900);
  line-height: 1.3;
}

.article-card p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

.article-card .read {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-700);
}

@media (max-width: 720px) {
  .article-list {
    grid-template-columns: 1fr;
  }
}

/* A post: one column of reading width, the app's voice, nothing that sells in the middle. */
.post-head {
  background: var(--brand-900);
  color: #fff;
  padding: 56px 0 48px;
}

.post-head .wrap {
  max-width: 760px;
}

.post-head .crumbs {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
}

.post-head .crumbs a {
  color: inherit;
}

.post-head h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.2;
}

.post-head .standfirst {
  margin-top: 16px;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
}

.post-head .meta {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.post {
  padding: 48px 0 24px;
}

.post .wrap {
  max-width: 760px;
}

.post h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-top: 44px;
  scroll-margin-top: 80px;
}

.post h2:first-child {
  margin-top: 0;
}

.post h3 {
  font-size: 21px;
  font-weight: 700;
  margin-top: 30px;
  color: var(--brand-900);
}

.post p {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.75;
}

.post p.lead {
  font-size: 19px;
  font-weight: 500;
  color: var(--brand-900);
}

.post ul,
.post ol {
  margin: 12px 0 0;
  padding-inline-start: 22px;
  font-size: 17px;
  line-height: 1.75;
}

.post li + li {
  margin-top: 4px;
}

.post blockquote {
  margin: 20px 0 0;
  padding: 16px 22px;
  border-inline-start: 3px solid var(--brand-200);
  background: #fff;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-900);
}

.post .callout {
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
}

.post .callout strong {
  display: block;
  color: var(--brand-900);
  font-size: 17px;
  margin-bottom: 4px;
}

.post .callout p {
  margin-top: 6px;
  font-size: 15.5px;
}

.post .callout.honest {
  background: var(--brand-50);
  border-color: var(--brand-100);
}

.post .themes {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post .themes li {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-900);
  margin: 0;
}

/* The chain of the circle, said once as a line the eye can walk along. */
.chain {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-900);
}

.chain span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
}

.chain i {
  font-style: normal;
  color: var(--brand-500);
  font-weight: 700;
}

.chain .again {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand-700);
}

/* The seven stations, one after the other, each with room to say what it means. */
.stations {
  margin-top: 8px;
}

.station {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 24px 0;
}

.station + .station {
  border-top: 1px dashed var(--line);
}

.station .badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--node-bg);
  border: 1px solid var(--node-line);
  position: relative;
}

.station .badge i {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--node-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  display: grid;
  place-items: center;
}

.station h3 {
  margin-top: 0;
  font-size: 23px;
  font-weight: 800;
  color: var(--node-ink);
}

.station .voice {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-900);
}

.station p {
  margin-top: 8px;
  font-size: 16.5px;
}

.station ul {
  font-size: 16.5px;
}

.station .em {
  font-weight: 600;
  color: var(--brand-900);
}

.station.s1 {
  --node-bg: #eefaf1;
  --node-line: #bfe8cb;
  --node-ink: #1f7a3e;
}

.station.s2 {
  --node-bg: #eef4fd;
  --node-line: #bfd3f5;
  --node-ink: #1e4fa3;
}

.station.s3 {
  --node-bg: #fff8e5;
  --node-line: #f4dc98;
  --node-ink: #92400e;
}

.station.s4 {
  --node-bg: #fff0ee;
  --node-line: #f6c2ba;
  --node-ink: #b3382a;
}

.station.s5 {
  --node-bg: #f4effc;
  --node-line: #d4c4f2;
  --node-ink: #5b3ea6;
}

.station.s6 {
  --node-bg: #ebf8f5;
  --node-line: #b6e6dc;
  --node-ink: #0f6b62;
}

.station.s7 {
  --node-bg: #fdeef3;
  --node-line: #f6bfd0;
  --node-ink: #9d174d;
}

@media (max-width: 560px) {
  .station {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Small figures a post can carry: three cards in a row, or a ladder of six ages. */
.post .trio {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.post .trio div {
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.post .trio div.ours {
  background: var(--brand-50);
  border-color: var(--brand-200);
}

.post .trio strong {
  display: block;
  font-size: 17px;
  color: var(--brand-900);
}

.post .trio span {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .post .trio {
    grid-template-columns: 1fr;
  }
}

.ladder {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 20px 16px;
}

.ladder .legend {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.ladder .legend span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-inline-end: 6px;
  vertical-align: -1px;
  background: var(--brand-900);
}

.ladder .legend span.c::before {
  background: var(--brand-200);
}

.rungs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  height: 170px;
}

.rung {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
}

.rung .bar {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}

.rung .parent {
  background: var(--brand-900);
  flex: var(--p);
}

.rung .child {
  background: var(--brand-200);
  flex: var(--c);
}

.rung small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ladder .caption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

/* After the post: the article beside it, and the way back to the product. */
.post-foot {
  padding: 24px 0 56px;
}

.post-foot .wrap {
  max-width: 760px;
}

.post-foot .next {
  display: block;
  text-decoration: none;
  padding: 20px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
}

.post-foot .next small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.post-foot .next strong {
  font-size: 19px;
  color: var(--brand-900);
}

.post-foot .try {
  margin-top: 16px;
  padding: 24px;
  border-radius: 20px;
  background: var(--brand-900);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.post-foot .try p {
  font-size: 16px;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.88);
}

.post-foot .try strong {
  display: block;
  font-size: 19px;
  color: #fff;
  margin-bottom: 2px;
}

/* ------------------------------------------------------------------ miluim.html
 * One page for families with a parent on reserve duty. Nothing here is a feature of the
 * app; the page shows the notifications every parent already gets, on the lock screen of
 * the one who is away. Built by build-miluim.mjs on the home page's bones.
 */
.miluim-hero .lede {
  max-width: 38ch;
}

/* The away parent's lock screen: a clock and a stack of notifications, nothing else. */
.phone.lock .screen {
  background: linear-gradient(180deg, #1f3d3a 0%, #0f4c47 60%, #17948a 100%);
  padding: 22px 12px 16px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.phone.lock .clock {
  text-align: center;
  color: #fff;
  margin-bottom: 14px;
}

.phone.lock .clock b {
  display: block;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.phone.lock .clock span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.phone.lock .notif {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  padding: 10px 12px;
  color: var(--ink);
  text-align: start;
}

.phone.lock .notif .app {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.phone.lock .notif .app img {
  border-radius: 4px;
}

.phone.lock .notif .app span {
  margin-inline-start: auto;
}

.phone.lock .notif b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-900);
}

.phone.lock .notif p {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.phone.lock .notif.dim {
  opacity: 0.72;
}

.miluim-why {
  padding-bottom: 0;
}

.miluim-why .sub + .sub {
  margin-top: 16px;
}

/* The offer: one card, text on one side and the two buttons on the other. */
.miluim-offer {
  padding-top: 0;
}

.miluim-offer .offer {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 32px;
  align-items: center;
}

.miluim-offer .offer .sub + .sub {
  margin-top: 12px;
}

.miluim-offer .actions,
.miluim-orgs .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.miluim-offer .actions {
  flex-direction: column;
  align-items: stretch;
}

.miluim-offer .actions .btn {
  text-align: center;
}

.miluim-orgs {
  padding-top: 0;
}

.miluim-orgs .actions {
  margin-top: 24px;
}

@media (max-width: 860px) {
  .miluim-offer .offer {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

  .miluim-offer .actions {
    flex-direction: row;
  }
}

/* The contact form on miluim.html. Posted to the API; this site has no server of its own. */
.contact {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.contact .pair-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-900);
}

.contact label small {
  font-weight: 400;
  color: var(--muted);
}

.contact input,
.contact textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
}

.contact textarea {
  resize: vertical;
  min-height: 120px;
}

.contact input:focus,
.contact textarea:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
  border-color: transparent;
}

/*
 * The honeypot. Taken out of the page without `display: none`, which some robots know to skip:
 * it is off-screen, has no size, and is out of the tab order and the accessibility tree — so
 * no person can reach it and nothing that fills in every input can tell it apart.
 */
.contact .trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.contact .note {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.contact .note.ok {
  color: var(--brand-600);
}

.contact .note.bad {
  color: #b42318;
}

.miluim-orgs .sub.small {
  margin-top: 18px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .contact .pair-fields {
    grid-template-columns: 1fr;
  }
}