/* "See what's coming for your child": the teaser on the homepage and /join/ (assets/coming-up.js, join offer 25 Oct
   2026). A white card with the 3px ink outline; one row per date with a yellow date chip and a stage-colour edge.
   Solid fills behind every word. Loaded after tokens.css; the page skins (coach.css) load later, so rules carry the
   .coming-up prefix. */
.coming-up{container:cu/inline-size;display:grid;gap:var(--space-4);padding:18px 16px 20px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);min-width:0}
.coming-up>*{margin:0;min-width:0}
.coming-up .cu-title{margin:0;font:900 clamp(1.375rem,1.1rem + 1.2vw,1.75rem)/1.12 var(--font-head);letter-spacing:-.01em;text-wrap:balance}
.coming-up [data-stage=expecting]{--c:var(--stage-expecting);--c-ink:var(--blue-ink)}
.coming-up [data-stage=baby]{--c:var(--stage-baby);--c-ink:var(--green-ink)}
.coming-up [data-stage=toddler]{--c:var(--stage-toddler);--c-ink:var(--yellow-ink)}
.coming-up [data-stage=preschool]{--c:var(--stage-preschool);--c-ink:var(--orange-ink)}
.coming-up [data-stage=primary]{--c:var(--stage-primary);--c-ink:var(--purple-ink)}
.coming-up [data-stage=family]{--c:var(--stage-family);--c-ink:var(--red-ink)}
.coming-up .cu-form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.coming-up .cu-kids{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none}
.coming-up .cu-kid{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.coming-up .cu-kid>label{font-weight:800;font-size:.9375rem;line-height:1.3}
.coming-up .cu-kid-field{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;min-width:0}
.coming-up .cu-date{flex:1 1 9rem;min-width:0;width:auto;max-width:100%;min-height:52px;font-size:1.0625rem}
.coming-up .cu-remove{flex:none;min-height:52px;padding:0 14px;border:3px solid var(--outline);border-radius:var(--radius-field);background:var(--card);color:var(--ink);font:800 .875rem/1 var(--font-head)}
.coming-up .cu-problem{margin:0;color:var(--red-ink);font-size:.875rem;font-weight:700}
.coming-up .cu-example{margin:0;color:var(--muted);font-size:.875rem;line-height:1.4}
.coming-up button.cu-add{justify-self:start;max-width:100%;white-space:normal;text-align:center;min-height:48px;border:3px solid var(--outline);border-radius:999px;background:var(--card);color:var(--ink);font-weight:800;padding:0 18px;box-shadow:var(--press)}
.coming-up .cu-add[hidden]{display:none}
.coming-up .cu-out{display:grid;gap:12px;min-height:6rem}
.coming-up .cu-out>*{margin:0}
.coming-up .cu-status{color:var(--muted);font-size:.9375rem}
.coming-up button.cu-more{justify-self:start;max-width:100%;white-space:normal;text-align:center;min-height:48px;padding:0 18px;border:3px solid var(--outline);border-radius:999px;background:var(--card);color:var(--ink);font:800 .9375rem/1 var(--font-body);box-shadow:var(--press)}
.coming-up .cu-item[hidden]{display:none}
.coming-up .cu-count{font:800 .9375rem/1.3 var(--font-head);color:var(--ink)}
.coming-up .cu-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.coming-up .cu-item{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px 10px 10px;border:3px solid var(--outline);border-left:10px solid var(--c,var(--outline));border-radius:16px;background:var(--card)}
.coming-up .cu-chip{display:block;padding:6px 4px;border:2px solid var(--ink-base);border-radius:12px;background:var(--yellow);color:var(--on-yellow);font:800 .8125rem/1.25 var(--font-head);text-align:center;overflow-wrap:anywhere}
.coming-up .cu-chip.is-est{border-style:dashed;background:var(--tile-butter);color:var(--ink)}
.coming-up .cu-body{min-width:0}
.coming-up .cu-body>p{margin:0}
.coming-up .cu-what strong{display:block;font:800 1rem/1.25 var(--font-head)}
.coming-up .cu-who{display:block;margin-top:2px;color:var(--c-ink,var(--muted));font-size:.8125rem;font-weight:800}
.coming-up .cu-todo{margin-top:4px!important;color:var(--muted);font-size:.875rem;line-height:1.45}
.coming-up .cu-few,.coming-up .cu-note,.coming-up .cu-privacy{max-width:62ch;color:var(--muted);font-size:.8125rem;line-height:1.45}
.coming-up .cu-few{padding:10px 12px;border:3px dashed var(--outline);border-radius:14px;color:var(--ink);font-weight:700}
.coming-up .cu-cta{display:grid;justify-items:center;gap:6px;text-align:center}
.coming-up .cu-cta>p{margin:0}
.coming-up a.cu-join{display:flex;align-items:center;justify-content:center;width:100%;max-width:26rem;min-height:58px;padding:10px 20px;border:3px solid var(--ink-base);border-radius:999px;background:var(--yellow);color:var(--on-yellow);font:800 1.125rem/1.2 var(--font-body);text-decoration:none;box-shadow:var(--press),0 8px 14px -8px rgba(0,0,0,.5)}
.coming-up a.cu-join:hover{background:var(--yellow);color:var(--on-yellow);filter:brightness(1.05)}
.coming-up a.cu-join:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.coming-up .cu-cta-under{font-weight:800;font-size:.9375rem}
.coming-up :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@container cu (max-width: 19rem){
  .coming-up .cu-item{grid-template-columns:minmax(0,1fr)}
  .coming-up .cu-chip{justify-self:start;padding:5px 12px}
}
@container cu (min-width: 34rem){
  .coming-up .cu-item{grid-template-columns:6.5rem minmax(0,1fr);padding:12px 16px 12px 12px}
}
@media(min-width:48em){.coming-up{padding:24px 24px 26px}}
/* On /join/ the button is also the page's in-page jump to the form (class member-jump, assets/member-registration.js);
   experience.css hides and restyles .member-jump in the hero, so these rules win. */
#join-hero .coming-up a.cu-join.member-jump,.member-hero .coming-up a.cu-join.member-jump{display:flex;width:100%;min-height:58px;margin:0}
/* A signed-in member has already joined: the button goes (the form and dates stay). */
body:has(.site-header.is-signed-in) .coming-up .cu-cta{display:none}