/* Busy Feet — brand system from the official Brand Kit v1.1 (Oct 2026).
   Signature Coral leads, Manatee Blue supports, Blush/Sand/Cream warm
   the backgrounds, a pastel manatee blue anchors the text. Kit rules honored:
   ONE strong coral moment per view; coral headlines sit on white,
   cream or blush (never on Manatee Blue); body text is a soft pastel blue (Alex: no navy, anywhere). */
:root {
  --coral: #F76856;
  --coral-dark: #DE4A35;
  --blush: #FDB7B0;
  --blush-wash: #FDECEA;
  --cream: #FCF1D6;
  --sand: #FEE5B3;
  --sand-wash: #FDF3DC; /* derived: a step between cream and sand */
  --manatee: #B4C8D3;
  --manatee-wash: #E8EFF3;
  --manatee-deep: #637884;
  /* Alex's call: no navy anywhere on the site. The text
     anchor is now a pastel blue a shade darker than the manatee —
     he'll fold it into the next brand-kit revision. */
  --river: #4C9BEC;
  --straw: #FDD28E;
  --hat-gold: #CC953F;
  --ink: #4A7292;
  --muted: #7C9BB2;
  --line: #F3E3CE;
  --radius: 22px;
  --shadow: 0 6px 24px rgba(247, 104, 86, 0.09), 0 1px 4px rgba(74, 114, 146, 0.08);
  --shadow-lift: 0 12px 32px rgba(247, 104, 86, 0.16), 0 2px 6px rgba(74, 114, 146, 0.10);
}
* { box-sizing: border-box; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
  background: #fff;
  overflow-x: hidden;
  overflow-x: clip; /* clip (not hidden) keeps the sticky header working */
}
h1, h2, h3, h4 { font-family: "Chewy", "Nunito", sans-serif; font-weight: 400; line-height: 1.15; }
h1 { font-size: 2.35rem; color: var(--coral); }
h2 { font-size: 1.8rem; color: var(--coral); margin-top: 2.2rem; }
h3 { font-size: 1.3rem; color: var(--ink); }
h4 { font-size: 1.1rem; color: var(--ink); }
a { color: var(--river); }
.handwritten { font-family: "Caveat", cursive; font-weight: 700; }

/* Header: white and slim, sticky, mascot + Chewy wordmark. */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem 1rem; background: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(74, 114, 146, 0.06);
}
.site-header a { color: var(--ink); text-decoration: none; margin-right: .9rem; font-weight: 700; }
.site-header a:hover { color: var(--coral); }
.brand { font-family: "Chewy", sans-serif; font-size: 1.65rem; color: var(--coral) !important; }
.brand-mascot { height: 46px; width: auto; vertical-align: middle; margin-right: .45rem; }
.site-header a.nav-cta {
  background: var(--coral); color: #fff !important; border-radius: 999px;
  padding: .45rem 1.05rem; margin-right: 0;
  transition: background .2s ease, transform .15s ease;
}
.site-header a.nav-cta:hover { background: var(--coral-dark); transform: translateY(-1px); }
.linkbtn { background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; }
.back-link { font-weight: 800; color: var(--river-deep); text-decoration: none; }
.back-link:hover { color: var(--coral-dark); }
/* Nav order puts your home base first when signed in (Alex,
   2026-10-21); the current page's link gets a soft pill + light
   coral underline so you can see where you are. */
.site-header nav a { padding: .32rem .55rem; border-radius: 10px; margin-right: .35rem; }
.site-header nav a.active { background: var(--manatee-wash);
  box-shadow: inset 0 -3px 0 var(--coral); }
.site-header nav a.active:hover { color: var(--coral-dark); }

/* Small in-page actions get soft pill 'chips' instead of naked blue
   hyperlinks (Alex: Details / Edit / Remove looked plain). */
.chip-link, .chip-btn {
  display: inline-block; padding: .24rem .72rem; border-radius: 999px;
  background: var(--blush-wash); border: 1.5px solid var(--blush);
  color: var(--coral-dark); font-weight: 800; font-size: .85rem;
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: background .2s ease, transform .15s ease;
}
.chip-link:hover, .chip-btn:hover { background: var(--blush); transform: translateY(-1px); }
.chip-btn.danger { background: #FFF5F2; border-color: #F2B8AC; color: #B3402A; }
.chip-btn.danger:hover { background: #FDE3DC; }
.action-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-cta {
  background: var(--blush-wash); border: 1.5px solid var(--blush);
  border-radius: 16px; padding: .9rem 1.1rem; font-weight: 700;
}
.cta-line { display: block; margin: .3rem 0; }
form.inline { display: inline; }
main { max-width: 1140px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }

/* Full-bleed: colored bands and the hero photo run edge to edge on
   big monitors (Alex, channeling Care.com); the content inside them
   still lines up with the 1140px column via the padding calc. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bleed-pad {
  padding-left: max(1.2rem, calc((100vw - 1140px) / 2 + 1rem));
  padding-right: max(1.2rem, calc((100vw - 1140px) / 2 + 1rem));
}

/* Resources dropdown in the header nav. */
.menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lift); padding: .45rem; min-width: 250px;
  display: none;
}
.menu a { display: block; margin: 0; padding: .5rem .7rem; border-radius: 10px; }
.menu a:hover { background: var(--blush-wash); color: var(--coral-dark); }
.menu-wrap:hover .menu, .menu-wrap:focus-within .menu { display: block; }

/* Hero: the photo IS the hero — full-bleed, content on a soft white veil. */
.hero {
  position: relative; overflow: hidden;
  margin-top: -1.2rem; padding-top: 2.4rem; padding-bottom: 2rem;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 26%, rgba(255,255,255,.78) 55%, rgba(255,255,255,.15) 88%);
}
.hero-content { position: relative; z-index: 1; max-width: 610px; }
.hero-sub { font-size: 1.13rem; font-weight: 700; max-width: 34rem; }
/* Fall hero (Alex, 2026-10-22): the seasonal banner shows at its
   natural wide aspect — nothing cropped — and the headline block
   sits below it on a soft wash instead of over a photo. */
.hero-fall { padding-top: 0; padding-bottom: 0; background: var(--sand-wash); }
.hero-banner img { width: 100%; height: auto; display: block; }
.hero-fall .hero-content { padding-top: 1.5rem; padding-bottom: 1.8rem; }
/* Fall 2026 photo hero (Alex's artwork, restored overlay design):
   the photo carries its own cream text space on the left, so the
   scrim is a whisper in the same cream - invisible over the blank
   space, just softening the leaf edge behind the words on
   mid-size screens. On phones the crop centers on the family and
   the words sit on a soft cream panel so they stay readable. */
.hero-photo .hero-bg::after {
  background: linear-gradient(90deg, rgba(252,241,214,.94) 0%, rgba(252,241,214,.78) 52%, rgba(252,241,214,.25) 74%, rgba(252,241,214,0) 88%);
}
@media (max-width: 700px) {
  .hero-photo .hero-bg img { object-position: 76% 30%; }
  .hero-photo .hero-content {
    background: rgba(252,241,214,.93); border-radius: 18px; padding: 1rem 1.1rem;
  }
}

/* ---------- Season skins (Alex, 2026-10-22) ----------
   The whole site wears the season: a tiled background pattern of
   small pastel motifs (the polka-dot idea) on every page, phones
   included, plus the matching hero banner. To change season, swap
   the class on <body> in base.html and the hero in home.html; one
   CSS rule + one pattern file per season. */
body.season-fall {
  background-image: url("../img/season-fall-leaves.png");
  background-size: 820px 820px;
}

/* Halloween week 2026 (Alex, 2026-10-26): cute, not scary. Pastel
   motifs on a pale lavender-white base; the banner he supplied is
   lavender too, so the hero wash borrows its exact purple and the
   top of the home page blends banner into page. */
body.season-halloween {
  background-color: #F1EAFB;
  /* A translucent lavender veil sits over the doodle tile (Alex,
     2026-10-26: bare text washed out where a pumpkin passed behind
     it). The art stays clearly visible in the open areas while its
     contrast drops everywhere, so words win wherever they land. */
  background-image: linear-gradient(rgba(241, 234, 251, 0.45), rgba(241, 234, 251, 0.45)), url("../img/season-halloween-doodle-pattern.svg");
  background-size: auto, 480px 480px;
}
/* Page-by-page readability sweep (2026-10-26): text that sits directly
   on the pattern gets a soft white cushion. Only direct children of
   <main> qualify, so anything already inside a card, sheet, band or
   panel is untouched, and stacked cushions (an eyebrow over a heading
   over an intro line) merge into one soft panel behind the block. */
body.season-halloween main > p,
body.season-halloween main > h1,
body.season-halloween main > h2,
body.season-halloween main > h3,
body.season-halloween main > h4 {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.85);
  border-radius: 10px;
}
body.season-halloween .hero-photo .hero-bg::after {
  background: linear-gradient(90deg, rgba(225,168,240,.95) 0%, rgba(225,168,240,.8) 52%, rgba(225,168,240,.28) 74%, rgba(225,168,240,0) 88%);
}
@media (max-width: 700px) {
  body.season-halloween .hero-photo .hero-content { background: rgba(225,168,240,.93); }
}

/* (The black-week night treatment lived here for one build on
   2026-10-26; Alex saw it live and chose white instead, so the
   rules came back out the same day. The night pattern file stays
   banked in static/img/ if a dark skin is ever wanted again.) */

@media (max-width: 720px) {
  .hero-bg::after { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)); }
  .hero-content { max-width: none; }
}
.finder { margin: 1.1rem 0; max-width: 480px; }
.finder h3 { margin-top: 0; }
.finder form { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.finder label { flex: 1 1 180px; }
.finder input { margin-bottom: 0; }
.pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 0; }
.pill {
  background: var(--sand); color: var(--ink);
  border-radius: 999px; padding: .28rem .8rem; font-weight: 700; font-size: .85rem;
}

/* Village Fund band: full-bleed blush wash, thermometer gauge. */
.fund-band {
  background: var(--blush-wash);
  padding-top: 1.7rem; padding-bottom: 1.7rem;
  margin-top: 1.8rem; margin-bottom: .5rem;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; align-items: center;
}
.fund-band h2 { margin-top: 0; }
.fund-band .handwritten { font-size: 1.8rem; color: var(--coral-dark); margin: .1rem 0 .4rem; }
@media (max-width: 720px) { .fund-band { grid-template-columns: 1fr; } }
.thermo {
  height: 24px; background: #fff; border: 2px solid var(--blush);
  border-radius: 999px; overflow: hidden;
}
.thermo-fill {
  height: 100%; border-radius: 999px; min-width: 0;
  background: linear-gradient(90deg, var(--straw), var(--coral));
  transition: width 1.2s ease;
}
.thermo-label { font-weight: 700; margin-top: .5rem; }

/* Village Fund goal card (Alex, 2026-10-21): a white card on the
   blush band — big counting number, and the manatee riding the fill.
   She bobs gently, like she's floating; she stands at the leading
   edge of the coral, wherever that edge is. */
.fund-card {
  background: #fff; border: 1.5px solid var(--blush);
  border-radius: var(--radius); padding: 1.15rem 1.25rem 1.05rem;
  box-shadow: 0 12px 30px rgba(222, 74, 53, .13);
}
.fund-top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.fund-amount {
  font-family: "Chewy", cursive; font-size: 2.5rem; line-height: 1;
  color: var(--coral-dark);
}
.fund-goal { font-weight: 800; color: var(--muted); }
.fund-track { position: relative; padding-top: 64px; margin-top: .15rem; }
.fund-mascot {
  position: absolute; top: 0;
  left: calc(var(--pct) * 1%);
  transform: translateX(calc(var(--pct) * -1%));
}
.fund-mascot-img {
  height: 66px; width: auto; display: block;
  animation: fund-bob 2.8s ease-in-out infinite;
}
@keyframes fund-bob {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-5px) rotate(2.5deg); }
}
.fund-impact { margin: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .fund-mascot-img { animation: none; }
}

/* How it works: a plain 1-2-3-4 grid. (A swipe carousel lived here
   for one evening — Alex found it barely moved, so it's gone.) */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem; padding: .2rem 0 .6rem;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-family: "Chewy", sans-serif; font-size: 1.3rem; margin-bottom: .35rem;
}
.fineprint { color: var(--muted); font-size: .92rem; }

/* Cards: white, big soft corners, warm shadow, gentle lift. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
/* Reading sheet: a calm panel that lifts a form-dense page off
   the seasonal background pattern (Alex, 2026-10-23 — the fall
   leaves were fighting the checkout text). Reusable. */
.sheet { background: rgba(255, 253, 248, .97); border: 1px solid var(--line);
  border-radius: 20px; padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: 0 12px 32px rgba(90, 60, 30, .10); }
.card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.plan-card { display: block; text-decoration: none; color: var(--ink);
  position: relative; overflow: hidden; }
.plan-card .btn { margin-top: .3rem; }
/* Metallic tier treatments (Alex, 2026-10-21): silver reads
   silver, gold gets a real gold highlight, platinum a shiny
   pale backing. The old coral border on Gold is gone. */
.plan-card::before { content: ""; position: absolute; inset: 0 0 auto 0;
  height: 8px; }
.plan-card.t-silver { background: linear-gradient(180deg, #F0F5F8, #fff 58%); }
.plan-card.t-silver::before {
  background: linear-gradient(90deg, #D8E4EB, #AFC6D2, #E6EEF2); }
.plan-card.t-silver h3 { color: var(--manatee-deep); }
.plan-card.t-gold { background: linear-gradient(180deg, #FBEDCB, #fff 58%);
  box-shadow: 0 14px 34px rgba(204, 149, 63, .20); }
.plan-card.t-gold::before {
  background: linear-gradient(90deg, #FDD28E, #E3A93C, #FDD28E); }
.plan-card.t-gold h3 { color: var(--gold-deep); }
.plan-card.t-platinum {
  background: linear-gradient(140deg, #EDF2F5 0%, #FFFFFF 42%, #DFE8ED 78%, #F4F8FA 100%); }
.plan-card.t-platinum::before {
  background: linear-gradient(90deg, #C9D6DE, #F2F6F8, #B9CBD6); }
.plan-card.t-platinum h3 { color: #546B7A; }

/* Stacked full-width cards (sitter portal, detail pages) need air
   between them — Alex found them flush. Grid cards use gap instead. */
main > .card + .card { margin-top: 1.15rem; }

/* Directory: the availability search sits apart from the grid, and
   each sitter card is a flex column so the Book buttons line up in
   a row no matter how long a bio runs (Alex: symmetry matters). */
.directory-search { margin-bottom: 1.8rem; }
.sitter-card { display: flex; flex-direction: column; }
.sitter-card h3, .sitter-card .badges-row, .sitter-card .stars-row,
.sitter-card .rate-line { text-align: center; }
.sitter-card .book-row { margin-top: auto; padding-top: .6rem; text-align: center; }
.sitter-card .book-row { display: flex; justify-content: center;
  gap: .5rem; flex-wrap: nowrap; }
.sitter-card .book-row .btn { background: #F88374; white-space: nowrap;
  padding: .55rem .85rem; font-size: .95rem; }
.sitter-card .book-row .btn:hover { background: var(--coral); }
.sitter-photo {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--blush); margin: 0 auto .45rem; display: block;
}
.sitter-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--blush-wash); color: var(--coral-dark);
  font-family: "Chewy", sans-serif; font-size: 2.3rem;
}
.portal-photo {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--blush); display: inline-block;
}
/* Her photo, front and center on My details (Alex, 2026-10-21):
   exactly what families see, with a placeholder until she adds one. */
.portal-photo-block { text-align: center; margin: .2rem 0 .9rem; }
.portal-photo-initial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blush-wash); color: var(--coral-dark);
  font-family: "Chewy", cursive; font-size: 3rem;
}
.season { display: flex; flex-direction: column; }
.season-cta { margin-top: auto; }
.card-photo {
  width: calc(100% + 2.5rem); max-width: none; height: 150px;
  object-fit: cover; display: block;
  margin: -1.15rem -1.25rem .85rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.page-photo {
  width: 100%; height: 270px; object-fit: cover; display: block;
  background: var(--cream, #FCF1D6);
  border-radius: var(--radius); margin-bottom: 1.1rem;
}
.season-icon {
  width: 30px; height: 30px; vertical-align: -7px; margin-right: .45rem;
  fill: var(--blush); stroke: var(--coral-dark); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
}

/* Scroll reveal: cards rise softly into view (JS adds .reveal/.in). */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.in:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .site-header a.nav-cta, button, .btn, .thermo-fill { transition: none; }
}

.badge {
  display: inline-block; background: var(--coral); color: #fff;
  border-radius: 999px; padding: .12rem .65rem; font-size: .78rem;
  /* Badges often sit inside Chewy headings — always render them in
     clean Nunito (Alex: the display font looked 'messy' that small). */
  font-family: "Nunito", sans-serif; font-weight: 800; letter-spacing: .02em;
  vertical-align: middle;
}
.sample { background: var(--hat-gold); }
.stars { color: var(--hat-gold); letter-spacing: .08em; }

.messages { list-style: none; max-width: 1140px; margin: 1rem auto; padding: 0 1rem; }
.messages li { padding: .65rem 1rem; border-radius: 14px; background: var(--manatee-wash); margin-bottom: .4rem; font-weight: 600; }
.messages li.error { background: var(--blush-wash); }

label { font-weight: 700; }
input, select, textarea {
  width: 100%; padding: .6rem .7rem; margin: .2rem 0 .8rem;
  border: 1.5px solid var(--line); border-radius: 14px;
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--blush-wash); border-color: var(--coral);
}
button, .btn {
  background: var(--coral); color: #fff; border: none; border-radius: 999px;
  padding: .65rem 1.4rem; cursor: pointer; text-decoration: none;
  display: inline-block; font: inherit; font-weight: 800;
  transition: background .2s ease, transform .15s ease;
}
button:hover, .btn:hover { background: var(--coral-dark); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(1px); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem; border-bottom: 1px solid var(--line); }
.errorlist { color: var(--coral-dark); font-weight: 700; }
.cal td { width: 14.28%; height: 4.2rem; vertical-align: top; font-size: .85rem; border: 1px solid var(--line); }
.cal td.off { background: var(--cream); color: #C9BCA6; }
.cal td a { font-weight: 800; color: var(--coral-dark); }
.cal-win { background: var(--coral); color: #fff; border-radius: 6px; padding: 0 .3rem; margin-top: .2rem; font-size: .72rem; font-weight: 700; }
.card .linkbtn { color: var(--coral-dark); text-decoration: underline; }

/* Choice groups (kid picker, zones, star rating): options in a row. */
input[type="checkbox"], input[type="radio"] { width: auto; margin: .1rem .35rem .1rem 0; }
.inline-choices > div, .inline-choices > label { display: inline-block; margin: .15rem 1rem .15rem 0; }
.inline-choices label { display: inline-flex; align-items: center; font-weight: normal; }

/* Where we serve: a real map + zone pills. */
.serve-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 720px) { .serve-grid { grid-template-columns: 1fr; } }
.map-wrap iframe {
  width: 100%; height: 320px; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Contact: a highlighted, separated card. */
.contact-card { background: var(--blush-wash); border-color: var(--blush); margin-top: 2.2rem; }
.contact-card h2 { margin-top: .2rem; }

img { max-width: 100%; }

/* ---------- Mobile (Alex: 'on a phone it looks squished') ----------
   One consolidated phone treatment: the header wraps instead of
   cramming, type steps down, wide tables scroll sideways instead of
   crushing, the calendar compacts, and search forms stack. */
@media (max-width: 720px) {
  main { padding: 1rem .8rem 1.6rem; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.5rem; margin-top: 1.7rem; }
  h3 { font-size: 1.15rem; }

  .site-header { flex-wrap: wrap; row-gap: .3rem; padding: .5rem .8rem; }
  .brand { font-size: 1.35rem; }
  .brand-mascot { height: 38px; margin-right: .35rem; }
  .site-header nav { display: flex; flex-wrap: wrap; align-items: center; row-gap: .25rem; }
  .site-header a { margin-right: .65rem; font-size: .95rem; }
  /* The dropdown becomes a sheet pinned to both screen edges —
     Alex's screenshot showed the right-aligned version sliding off
     the left of his phone; pinned to the viewport it cannot. */
  .menu {
    position: fixed; top: auto; left: .8rem; right: .8rem;
    width: auto; min-width: 0; margin-top: .35rem;
  }

  .hero { padding-top: 1.6rem; padding-bottom: 1.4rem; }
  .hero-sub { font-size: 1.02rem; }
  .finder form { flex-direction: column; align-items: stretch; }
  .finder label { flex: none; }
  .card-photo { height: 130px; }
  .page-photo { height: 190px; }

  /* Data tables scroll sideways rather than squish (the calendar
     is exempt — it compacts instead, below). */
  main table:not(.cal) { display: block; overflow-x: auto; white-space: nowrap; }

  /* …except stacked tables (My Bookings): on a phone each row
     becomes a labeled card — no sideways slide (Michaela found
     the sliding confusing). */
  main table.stack-table { display: block; overflow-x: visible; white-space: normal; }
  .stack-table .stack-head { display: none; }
  .stack-table tbody, .stack-table tr { display: block; }
  .stack-table tr {
    background: #fff; border: 1.5px solid var(--blush);
    border-radius: 16px; padding: .55rem .9rem; margin-bottom: .7rem;
    box-shadow: 0 6px 16px rgba(74, 114, 146, .08);
  }
  .stack-table td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; border: none; padding: .3rem 0; text-align: right;
  }
  .stack-table td::before {
    content: attr(data-label); font-weight: 800;
    color: var(--muted); text-align: left;
  }
  .stack-table td:last-child { justify-content: flex-end; }
  .stack-table td:last-child::before { content: none; }
  .cal td { height: 3.1rem; font-size: .76rem; padding: .3rem; }
  .cal-win { font-size: .64rem; }

  /* The directory's who's-free form stacks its three fields. */
  .directory-search form label { display: block; }
  .thermo-label { font-size: .95rem; }
}

/* Sitter portal tabs (Michaela, 2026-10-21). */
.portal-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1.1rem; }
.portal-tab {
  background: #fff; border: 1.5px solid var(--blush); color: var(--ink);
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .95rem;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.portal-tab:hover { background: var(--blush-wash); }
.portal-tab.active { background: var(--coral); border-color: var(--coral); color: #fff; }
.tab-panel[hidden] { display: none; }

/* Parent profile hub (Alex, 2026-10-21): photo header + tappable
   rows that carry every parent tool in one place. */
/* Centered family photo. It was a heart until 2026-10-22: Alex &
   Michaela retired the heart because a heart clips exactly where
   faces land in a group photo. A wide rounded rectangle keeps
   the whole family in frame. */
.profile-head { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .35rem; }
.profile-photo-wrap { line-height: 0; }
.profile-photo {
  width: 352px; max-width: 86vw; aspect-ratio: 4 / 3; height: auto;
  object-fit: cover; flex: none; border-radius: 24px;
  box-shadow: 0 14px 28px rgba(247, 104, 86, .24);
}
.profile-initial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blush-wash); color: var(--coral-dark);
  font-family: "Chewy", cursive; font-size: 4.2rem;
}
.doc-sample-row { opacity: .75; }
.stars-row { margin: .1rem 0 .3rem; font-size: .95rem; }
.stars-glyphs { letter-spacing: .14em; font-size: 1.02rem; }
.stars-glyphs .on { color: var(--coral); }
.stars-glyphs .off { color: #DCD2BF; }
.stars-none { color: var(--ink-soft, #7C8DA6); font-weight: 600;
  font-size: .86rem; }
.rate-line { margin: .1rem 0 .5rem; }
.sc-block { margin: .55rem 0; }
.sc-label { font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--river-deep); margin: 0 0 .15rem; }
.sc-block p { margin: 0 0 .3rem; }
.sc-meta { margin: .25rem 0; font-size: .9rem; }
.sc-meta span { font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--river-deep); margin-right: .4rem; }
.avail-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.avail-chip { background: var(--blush-wash); border-radius: 999px;
  padding: .22rem .65rem; font-size: .8rem; font-weight: 700; }
.stars-link { text-decoration: none; color: inherit; }
.review-block { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.review-block:last-child { border-bottom: none; padding-bottom: 0; }
.review-block p { margin: .2rem 0; }
.star-choices label { font-size: 1.25rem; color: var(--hat-gold);
  letter-spacing: .1em; cursor: pointer; }
.profile-name { margin: 0 0 .35rem; }
.hub-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; padding: .45rem 0; margin: 0;
  border-bottom: 1px solid var(--line);
}
.hub-row:last-child { border-bottom: none; }

/* Sitter calendar day editor: the whole day cell is a button that
   opens an in-place pop-up to add/remove that day's hours. */
.cal-cell-btn {
  display: block; width: 100%; min-height: 100%;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.cal-cell-btn:hover { background: var(--blush-wash); }
.cal-day-num { font-weight: 800; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(74, 114, 146, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 1rem 1rem;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  position: relative; background: #fff; width: min(430px, 100%);
  border: 1.5px solid var(--blush); border-radius: var(--radius);
  box-shadow: 0 22px 50px rgba(74, 114, 146, .35); padding: 1.2rem 1.3rem;
}
.modal-close {
  position: absolute; top: .55rem; right: .8rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
}
.avail-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--line);
}
.avail-times { display: flex; gap: 1rem; flex-wrap: wrap; }
.avail-times input { width: auto; }

/* Guided help widget: floating coral button + chat-style panel,
   bottom-right on every page. */
.help-btn {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 55;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--coral); color: #fff; border: none; cursor: pointer;
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .95rem;
  padding: .68rem 1.05rem; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(222, 74, 53, .35);
}
.help-btn:hover { background: var(--coral-dark); }
.help-panel {
  position: fixed; right: 1rem; bottom: 4.6rem; z-index: 65;
  width: min(335px, calc(100vw - 2rem));
  background: #fff; border: 1.5px solid var(--blush);
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(74, 114, 146, .28);
  padding: 1rem; max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
}
.help-panel[hidden] { display: none; }
.help-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .7rem; }
.help-mascot { height: 46px; width: auto; }
.help-close {
  margin-left: auto; align-self: flex-start; background: none; border: none;
  font-size: 1.45rem; line-height: 1; padding: .1rem .35rem; cursor: pointer;
  color: var(--ink-soft); border-radius: 8px;
}
.help-close:hover { color: var(--ink); background: var(--blush-wash); }
.help-thread { overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding-right: .2rem; }
.help-a {
  background: var(--blush-wash); border-radius: 14px; border-bottom-left-radius: 4px;
  padding: .55rem .75rem; font-size: .93rem; line-height: 1.45;
}
.help-qb {
  align-self: flex-end; background: var(--manatee-wash);
  border-radius: 14px; border-bottom-right-radius: 4px;
  padding: .5rem .75rem; font-size: .93rem; font-weight: 700; max-width: 88%;
}
.help-qs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.help-q {
  background: #fff; border: 1.5px solid var(--blush); color: var(--coral-dark);
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .82rem;
  padding: .32rem .7rem; border-radius: 999px; cursor: pointer;
}
.help-q:hover { background: var(--blush-wash); }
@media (max-width: 720px) {
  .help-panel { right: .8rem; left: .8rem; width: auto; }
  .help-btn { right: .8rem; bottom: .8rem; }
}

/* ---------- Design polish pass (Alex, 2026-10-21) ----------
   Free reign on look & feel. What the research says people love:
   bento grids (asymmetric tiles, biggest box = most important,
   no orphan possible), pastel as a section system over a neutral
   base with one strong accent (60-30-10), and calm scroll motion.
   Pure CSS — nothing here can slow a phone down. */

/* Proof strip under the hero: four short trust facts. */
.proof {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem 0; padding: 1.05rem 0 .35rem; text-align: center;
}
.proof span {
  font-weight: 800; font-size: .95rem; color: var(--muted);
  padding: 0 1.1rem;
}
.proof span + span { border-left: 2px solid var(--sand); }

/* Rhythm bands: pastel rooms the page walks through. */
.band { padding-top: 2.1rem; padding-bottom: 2.3rem; margin-top: 2rem; }
.band h2 { margin-top: 0; }
.band-cream { background: var(--cream); }
.band-coral { background: var(--blush-wash); }
.founding-zeros { margin: .6rem 0; padding-left: 1.2rem; line-height: 1.55; }
.founding-count {
  font-family: "Chewy", cursive; font-size: 1.6rem; color: var(--coral-dark);
  margin: .4rem 0 .8rem;
}
.band .cards { margin-bottom: .4rem; }

/* Moments as a bento: Date nights is the hero tile (2x2), Backup
   care wide, Visiting + Celebrations small, New baby a banner.
   Photos run at natural colour with only a whisper of card wash
   (the original pastel grade was turned down, then off, on
   2026-10-22 — Alex: 'the fade is a little bit too high'). */
.moments-bento {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 172px;
  grid-template-areas:
    "date date backup backup"
    "date date visiting celebrate"
    "baby baby baby baby";
}
.moment {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 22px rgba(74, 114, 146, .14);
}
/* Bento tiles wear calm pastel tints, no photos (Alex, 2026-10-26:
   the stock photos made the section busy and distracted the eye;
   the icons carry the tiles now). */
.moment-date { grid-area: date; background: #FDECEA; }
.moment-backup { grid-area: backup; background: #E8F1F8; }
.moment-visiting { grid-area: visiting; background: #FEF3D8; }
.moment-celebrate { grid-area: celebrate; background: #FDEBD2; }
.moment-baby { grid-area: baby; background: #E4F2E8; }
.moment::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(155deg,
    rgba(180, 200, 211, .05), rgba(253, 183, 176, .03) 55%, rgba(253, 183, 176, 0));
}
.moment-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column;
  padding: 1rem 1.05rem;
}
.moment-body .moment-cta, .moment-body .pill { margin-top: auto; align-self: flex-start; }
.moment-body h3 { margin: 0 0 .2rem; font-size: 1.28rem; }
.moment-body p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.4; }
.moment-cta {
  display: inline-block; background: #fff; color: var(--coral-dark);
  border: 1.5px solid var(--blush); font-weight: 800; font-size: .86rem;
  padding: .3rem .8rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 3px 10px rgba(222, 74, 53, .15);
}
.moment-cta:hover { background: var(--blush-wash); }
@media (max-width: 1020px) {
  .moments-bento {
    grid-template-columns: 1fr 1fr; grid-auto-rows: 178px;
    grid-template-areas:
      "date date" "backup visiting" "celebrate baby";
  }
}
@media (max-width: 720px) {
  .moments-bento {
    grid-template-columns: 1fr; grid-auto-rows: 196px;
    grid-template-areas: "date" "backup" "visiting" "celebrate" "baby";
  }
  .proof span + span { border-left: none; }
  .proof span { padding: 0 .6rem; }
}

/* Founders' quote band: the Thales oversized-quote moment in
   Busy Feet clothes — sand-wash room, giant coral mark, the
   quote itself in Caveat (the brand's quote hand). */
.band-quote { background: var(--sand-wash); }
.quote-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.quote-mark {
  display: block; font-family: "Chewy", cursive;
  font-size: 5.2rem; line-height: .55; color: var(--coral);
  margin-bottom: 1.1rem;
}
.quote-text {
  font-family: "Caveat", cursive; font-weight: 700;
  font-size: 2rem; line-height: 1.3; color: var(--ink);
  margin: 0 0 .9rem;
}
.quote-by {
  font-weight: 800; font-size: .92rem; color: var(--muted);
  letter-spacing: .02em; margin: 0;
}
@media (max-width: 720px) { .quote-text { font-size: 1.6rem; } }

/* Footer: cream band, link columns, the full logo in a white tile. */
.site-footer { background: var(--cream); border-top: 1px solid var(--line); margin-top: 3rem; }
/* "Get the app" card + install instructions (Alex, 2026-10-22). */
/* Calm reading panel for the long guides (Alex, 2026-10-22): the
   pattern frames the page, the words sit on a clean solid card. */
.reading-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 1.6rem 1.8rem; margin-top: 1rem;
}
@media (max-width: 700px) { .reading-panel { padding: 1.1rem 1rem; } }
.app-card {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 1140px; margin: 0 auto; padding: 1.2rem 1rem .2rem;
}
.app-card-icon { width: 56px; height: 56px; border-radius: 14px; }
.app-card-text { flex: 1 1 260px; }
.app-card-text h4 { margin: 0 0 .2rem; }
.app-card-text p { margin: 0; }
.install-sheet {
  position: relative; max-width: 720px; margin: .8rem auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.install-sheet h4 { margin-top: 0; }
.install-close {
  position: absolute; top: .4rem; right: .6rem; background: none; border: none;
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink-soft, var(--muted));
}
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; max-width: 1140px; margin: 0 auto; padding: 1.4rem 1rem 0.6rem; }
.footer-brand { max-width: 1140px; margin: 0 auto; padding: .4rem 1rem 1rem; }
.footer-brand img { height: 104px; width: auto; display: block; }
.site-footer h4 { margin: .2rem 0 .5rem; color: var(--coral-dark); }
.social-row { display: flex; gap: .55rem; }
.social-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--manatee-wash); color: var(--ink);
  transition: background .2s ease, color .2s ease, transform .2s ease; }
.social-btn svg { width: 21px; height: 21px; }
.social-btn:hover { background: var(--coral); color: #fff; transform: translateY(-2px); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .3rem 0; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--coral); text-decoration: underline; }
.site-footer .fineprint { max-width: 1140px; margin: 0 auto; padding: 0 1rem 1.4rem; }

/* Receipt-style total (Michaela, 2026-10-21): an elegant itemized
   card instead of a bare table — dotted leaders, one clear total,
   and the Village Fund as a promise line, never a charge line. */
.receipt {
  background: #fff; border: 1.5px solid var(--blush);
  border-radius: var(--radius); padding: 1.15rem 1.3rem;
  box-shadow: 0 12px 28px rgba(74, 114, 146, .12);
  max-width: 540px; margin-top: 1.1rem;
}
.receipt h2 { margin-top: 0; }
.receipt-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .5rem 0;
  border-bottom: 1px dotted var(--blush);
}
.receipt-row small { color: var(--muted); font-weight: 700; }
.receipt-amt { font-weight: 800; white-space: nowrap; }
.receipt-total {
  border-bottom: none; border-top: 2px solid var(--sand);
  margin-top: .3rem; padding-top: .7rem;
  font-family: "Chewy", cursive; font-size: 1.45rem; color: var(--ink);
}
.receipt-total .receipt-amt { font-family: "Chewy", cursive; }
.receipt-note {
  background: var(--blush-wash); border-radius: 12px;
  padding: .55rem .8rem; font-size: .92rem; margin: .8rem 0;
}

/* ---------- Deep UI pass: class & motion (Alex, 2026-10-21) ----
   The audience is upper-middle-income St. Johns: the elevation is
   restraint — eyebrows, air, hairlines, and calm motion. All of it
   is CSS transforms/opacity, so phones pay nothing for it. */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--hat-gold);
  margin: 2.4rem 0 .3rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--sand); flex: none;
}
.eyebrow + h2 { margin-top: 0; }
.band .eyebrow { margin-top: 0; }

/* Hero: a slow, barely-there drift (Ken Burns) and a gentle
   rise-in for the words. Transform/opacity only. */
.hero-bg img { animation: hero-drift 26s ease-in-out infinite alternate; }
@keyframes hero-drift {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.07) translateX(-1.2%); }
}
.hero-content > * { animation: rise-in .8s ease both; }
.hero-content > *:nth-child(2) { animation-delay: .12s; }
.hero-content > *:nth-child(3) { animation-delay: .24s; }
.hero-content > *:nth-child(4) { animation-delay: .36s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Staggered card reveals: siblings drift in one after another. */
.cards > .card.reveal:nth-child(2) { transition-delay: .07s; }
.cards > .card.reveal:nth-child(3) { transition-delay: .14s; }
.cards > .card.reveal:nth-child(4) { transition-delay: .21s; }
/* Bento tiles stagger individually (the container's own fade is
   neutralized so the tiles own the motion). */
.moments-bento.reveal { opacity: 1; transform: none; }
.moments-bento.reveal .moment {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.moments-bento.reveal.in .moment { opacity: 1; transform: none; }
.moments-bento.reveal.in .moment:nth-child(2) { transition-delay: .08s; }
.moments-bento.reveal.in .moment:nth-child(3) { transition-delay: .16s; }
.moments-bento.reveal.in .moment:nth-child(4) { transition-delay: .24s; }
.moments-bento.reveal.in .moment:nth-child(5) { transition-delay: .32s; }

/* Buttons lift a breath on hover. */
.btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(222, 74, 53, .26); }

/* Village Fund showpiece: bigger manatee with a soft glow, a
   shimmer sweeping the fill, milestone ticks, and impact lines
   that rotate like a quiet ticker. */
.fund-track { padding-top: 92px; }
.fund-mascot { z-index: 2; }
.fund-mascot::before {
  content: ""; position: absolute; inset: -16px -24px; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 183, 176, .55), rgba(253, 183, 176, 0));
}
.fund-mascot-img { height: 94px; }
.thermo-fill { position: relative; overflow: hidden; }
.thermo-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: fund-shimmer 4.2s ease-in-out infinite;
}
@keyframes fund-shimmer {
  0%, 55% { transform: translateX(-130%); }
  90%, 100% { transform: translateX(130%); }
}
.fund-ticks { position: relative; height: 1.4rem; margin-top: .2rem; }
.fund-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  padding-top: .45rem; font-size: .72rem; font-weight: 800; color: var(--muted);
}
.fund-tick::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 2px; height: .34rem; border-radius: 2px; background: var(--blush);
}
.fund-tick.lit { color: var(--coral-dark); }
.fund-tick.goal { transform: translateX(-100%); }
.fund-lines { position: relative; min-height: 3.3em; margin-top: .5rem; }
.fund-line {
  position: absolute; left: 0; right: 0; top: 0; opacity: 0;
  animation: fund-cycle 13.5s infinite;
}
.fund-line:nth-child(2) { animation-delay: 4.5s; }
.fund-line:nth-child(3) { animation-delay: 9s; }
@keyframes fund-cycle {
  0% { opacity: 0; transform: translateY(6px); }
  4%, 29% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: translateY(-4px); }
}
@media (max-width: 720px) { .fund-lines { min-height: 4.4em; } }
@media (prefers-reduced-motion: reduce) {
  .hero-bg img, .hero-content > *, .thermo-fill::after { animation: none; }
  .fund-line { animation: none; opacity: 0; }
  .fund-line:first-child { opacity: 1; }
  .moments-bento.reveal .moment { opacity: 1; transform: none; transition: none; }
  .cart-row.flash { animation: none; }
}

/* ---------- The whole palette at work (Alex, 2026-10-21) -------
   Coral was doing every job. Now each kit color has an assignment,
   used the same way on every page — that's what keeps variety
   classy instead of confetti:
     Coral    → the ONE action moment (primary buttons, active tab)
     Manatee  → standard badges, Silver tier, calm surfaces
     Mint     → health & go-ahead signals (CPR, Enrolled, Confirmed)
                (new pastel green, from the beach-ball family)
     Straw/Sand → premium & warm (Gold tier, Driver, pending states)
     Blush    → soft signals (last-minute, meet & greet, declined)
     River    → links and informational tints                       */
:root {
  --river-wash: #E4EFFC;
  --river-deep: #2F6196;
  --mint: #B9E4C6;
  --mint-wash: #EAF6EE;
  --mint-deep: #4C7A5D;
  --gold-deep: #A87B24;
}

/* Badges: pastel pills with deep-tint text, colored by MEANING. */
.badge { background: var(--manatee-wash); color: var(--manatee-deep); }
.badge.b-mint { background: var(--mint-wash); color: var(--mint-deep); }
.badge.b-gold { background: var(--sand-wash); color: var(--gold-deep); }
.badge.b-blush { background: var(--blush-wash); color: var(--coral-dark); }
.badge.sample { background: var(--hat-gold); color: #fff; }
.badge.b-founding { background: var(--coral); color: #fff; }
.founding-note { background: var(--blush-wash); border: 2px dashed var(--coral); border-radius: 14px; padding: .8rem 1rem; }
.founding-box { background: var(--blush-wash); border: 2px solid var(--coral); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.founding-box h2 { margin-top: .2rem; }
.coming-soon-box { background: var(--sky-wash, #E8F1F8); border: 2px solid var(--ink); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.coming-soon-box h2 { margin-top: .2rem; }
.test-box { background: #FFF4D6; border: 2px dashed #B8860B; border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.test-box h2 { margin-top: .2rem; }
.badge-test { background: #B8860B; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: .12rem .45rem; border-radius: 999px; vertical-align: middle; }

/* Booking status pills — same language everywhere they appear. */
.status-pill {
  display: inline-block; border-radius: 999px; padding: .08rem .6rem;
  font-size: .8rem; font-weight: 800; vertical-align: middle;
  background: var(--manatee-wash); color: var(--manatee-deep);
}
.status-pill.s-pending { background: var(--sand-wash); color: var(--gold-deep); }
.status-pill.s-confirmed { background: var(--mint-wash); color: var(--mint-deep); }
.status-pill.s-completed { background: var(--river-wash); color: var(--river-deep); }
.status-pill.s-cancelled, .status-pill.s-declined {
  background: var(--blush-wash); color: var(--coral-dark);
}

/* How-it-works numbers rotate the warm half of the palette. */
.steps > :nth-child(1) .step-num { background: var(--sand); color: var(--ink); }
.steps > :nth-child(2) .step-num { background: var(--manatee); color: var(--ink); }
.steps > :nth-child(3) .step-num { background: var(--mint); color: var(--ink); }
.steps > :nth-child(4) .step-num { background: var(--blush); color: var(--ink); }

/* Membership tiers get a colored crown: Silver cool, Gold gold,
   Platinum takes the coral moment. */
.plans > :nth-child(1) { border-top: 6px solid var(--manatee); }
.plans > :nth-child(2) { border-top: 6px solid var(--straw); }
.plans > :nth-child(3) { border-top: 6px solid var(--coral); }

/* Bento washes diversify: celebrations go golden, new-baby goes mint. */
.moment-celebrate::after {
  background: linear-gradient(160deg, rgba(254, 229, 179, .22), rgba(254, 229, 179, .04) 55%, rgba(253, 210, 142, .12));
}
.moment-baby::after {
  background: linear-gradient(160deg, rgba(185, 228, 198, .20), rgba(185, 228, 198, .03) 55%, rgba(180, 200, 211, .08));
}

/* The fund's goal tick wears gold. */
.fund-tick.goal { color: var(--gold-deep); }

/* A soft secondary button (sand → straw) for the step before the
   commitment — previews, not purchases. */
.btn-soft { background: var(--sand); color: var(--ink); box-shadow: none; }
.btn-soft:hover { background: var(--straw); box-shadow: 0 8px 18px rgba(204, 149, 63, .22); }

/* Hub rows get a pastel dot each — a quiet color key for the
   parent's village. */
.hub-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: .5rem; background: var(--manatee);
}
.hub-dot.t-coral { background: var(--coral); }
.hub-dot.t-river { background: var(--river); }
.hub-dot.t-blush { background: var(--blush); }
.hub-dot.t-gold { background: var(--straw); box-shadow: inset 0 0 0 1.5px var(--hat-gold); }
.hub-dot.t-mint { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--mint-deep); }

/* Application pipeline statuses join the pill language. */
.status-pill.s-new { background: var(--river-wash); color: var(--river-deep); }
.status-pill.s-reviewing { background: var(--sand-wash); color: var(--gold-deep); }
.status-pill.s-interviewed { background: var(--mint-wash); color: var(--mint-deep); }
.status-pill.s-approved { background: var(--mint-wash); color: var(--mint-deep); }
.status-pill.s-rejected { background: var(--blush-wash); color: var(--coral-dark); }

/* Quarter calendar + booking-list cart (Alex, 2026-10-21): three
   month grids, days tap into a cart where each day gets its own
   sitter, start and hours. */
.qcal { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem; margin: 1rem 0; }
.qcal-month h3 { margin: .2rem 0 .5rem; color: var(--river-deep); }
.qcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.qcal-head span { text-align: center; font-size: .72rem; font-weight: 800;
  color: var(--muted); text-transform: uppercase; }
.qcal-cell { border: 1px solid var(--line); background: #fff; border-radius: 10px;
  min-height: 62px; padding: .28rem .32rem; text-align: left; font: inherit;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.qcal-cell:hover { border-color: var(--blush); }
.qcal-pad { border: none; background: transparent; cursor: default; }
.qcal-day { font-weight: 800; font-size: .86rem; }
.qcal-booking { font-size: .62rem; font-weight: 700; line-height: 1.25;
  background: var(--sand-wash); border-radius: 6px; padding: 1px 4px; }
.qcal-booking.s-confirmed { background: var(--mint-wash); }
.qcal-past { opacity: .42; }
.qcal-off { opacity: .35; cursor: not-allowed; background: #FBF7EF; }
.qcal-today { box-shadow: inset 0 0 0 2px var(--straw); }
.qcal-selected { background: #FDE3DF; border-color: var(--coral);
  box-shadow: inset 0 0 0 2px var(--coral), 0 2px 8px rgba(222, 74, 53, .28);
  position: relative; }
.qcal-selected .qcal-day { color: var(--coral-dark); }
.qcal-selected::after { content: "\2713 Added"; position: absolute; top: 4px;
  right: 4px; background: var(--coral); color: #fff; font-size: .56rem;
  font-weight: 800; letter-spacing: .02em; padding: 1px 6px;
  border-radius: 999px; }
.cart-toast { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1.1rem; z-index: 70; background: var(--ink, #2E3A46);
  color: #fff; font-weight: 700; font-size: .92rem; padding: .65rem 1.1rem;
  border-radius: 999px; box-shadow: 0 10px 28px rgba(46, 58, 70, .35);
  max-width: calc(100vw - 2rem); text-align: center; }
.cart-toast button { background: none; border: none; color: #FFD9D2;
  font: inherit; font-weight: 800; text-decoration: underline;
  cursor: pointer; padding: 0 0 0 .35rem; }
@keyframes cartFlash { 0% { background: var(--blush-wash); } 100% { background: #fff; } }
.cart-row.flash { animation: cartFlash 1.4s ease; }
.hr-group { border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem .8rem .2rem; margin: 0 0 .8rem; }
.hr-group legend { font-weight: 800; color: var(--river-deep);
  padding: 0 .35rem; font-size: .85rem; }
.hr-row { margin-bottom: .55rem; }
.hr-check { display: flex; gap: .5rem; align-items: flex-start;
  font-weight: 600; cursor: pointer; }
.hr-check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem;
  accent-color: var(--coral); flex: none; }
.hr-detail { margin: .3rem 0 0 1.6rem; }
.hr-detail input { width: min(100%, 30rem); }
.cart-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  border: 1px solid var(--line); border-radius: 14px; padding: .6rem .7rem;
  margin-bottom: .55rem; background: #fff; }
.cart-row strong { width: 100%; }
.cart-row label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.cart-row select, .cart-row input[type="time"] {
  display: block; margin-top: .15rem; padding: .38rem .45rem;
  border: 1px solid var(--line); border-radius: 9px; font: inherit;
  color: var(--ink); background: #fff; }

/* Sitter calendar bookings + booked rows in the day editor. Bookings
   wear Straw Gold so they read differently from coral availability. */
.cal-booking { display: block; background: var(--straw); color: var(--ink);
  border-radius: 6px; padding: 0 .3rem; margin-top: .2rem;
  font-size: .72rem; font-weight: 800; }
.avail-row.booked-row { background: var(--sand-wash); border: 1px solid var(--straw);
  border-radius: 10px; padding: .35rem .5rem; font-weight: 700; }

/* Quarter calendar readability (Alex, 2026-10-21): the first pass
   leaned on disabled buttons + whole-cell opacity, which browsers
   render washed-out. Now: explicit ink-colored numbers, muted (not
   transparent) past/off days, deeper sand borders, full-contrast
   booking chips. */
.qcal-cell { color: var(--ink); border: 1.5px solid #EBD9BC;
  box-shadow: 0 1px 3px rgba(124, 155, 178, .18); }
.qcal-day { color: var(--ink); font-size: .95rem; }
.qcal-head span { color: var(--ink); font-size: .78rem; }
.qcal-past { opacity: 1; background: #FBF6EC; }
.qcal-past .qcal-day { color: var(--muted); }
.qcal-off { opacity: 1; background: #FBF6EC; cursor: not-allowed; }
.qcal-off .qcal-day { color: var(--muted); }
.qcal-booking { font-size: .68rem; font-weight: 800; color: var(--ink);
  padding: 2px 5px; }
.qcal-booking.s-requested, .qcal-booking.s-pending { background: var(--sand); }

/* Date-night spots on the guide + the ops content editor. */
.spot { border-top: 1px solid var(--line); padding: .8rem 0 .2rem; }
.spot h3 { margin-bottom: .2rem; }
.spot-area {
  font-family: "Nunito", sans-serif; font-size: .82rem; font-weight: 800;
  color: var(--coral-dark, #DE4A35); white-space: nowrap;
}
.spot-form { border-top: 1px solid var(--line); padding: 1rem 0; }
.spot-form label, .edit-form label { display: block; margin-bottom: .6rem; }
.inline-form { margin-top: 1rem; }