/* Mock-site additions. Colours and type come from family.css variables only. */
body { margin: 0; background: #fff; }
.demobar { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; background: var(--adoa-ink, #171C22); color: #fff; font: 500 14px/1.4 var(--fam-font-body, system-ui, sans-serif); padding-block: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.demobar a { color: #FFD23F; font-weight: 700; }
.moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.moment { background: #fff; border-radius: 28px; padding: 18px 18px 16px; display: grid; gap: 8px; text-decoration: none; color: var(--adoa-ink); font-weight: 800; }
.moment img { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; }
.moment span.age { font-weight: 500; font-size: 14px; color: var(--brand-muted, #4A5662); }
.lede-narrow { max-width: 62ch; }
.illo { width: 100%; max-width: 480px; justify-self: center; }
.cover { width: 100%; border-radius: 24px; display: block; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--brand-line, #DCE3E9); vertical-align: top; }
.compare thead th { font-weight: 800; }
.phone { background: #fff; border-radius: 40px; overflow: hidden; border: 10px solid #171C22; display: grid; grid-template-rows: auto 1fr auto; min-height: 700px; max-width: 400px; width: 100%; justify-self: center; }
.phone .body { padding: 20px; display: grid; gap: 18px; align-content: start; background: #fff; }
.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 28px; align-items: start; }
.cap { font-weight: 800; margin: 0 0 12px; }
.step-panel[hidden] { display: none !important; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.choice { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px; border-radius: 22px; border: 2px solid var(--brand-line, #DCE3E9); background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: inherit; }
.choice img { width: 100%; max-width: 120px; aspect-ratio: 5 / 4; object-fit: contain; }
.choice[aria-pressed="true"] { border-color: var(--adoa-pool, #0077D6); box-shadow: 0 0 0 3px rgba(0, 119, 214, .18); }
@media (max-width: 640px) { .phone { min-height: 0; } }
/* Doses library: illustrated covers and filter chips (visual only) */
.fam-product__cover.is-illo { object-fit: contain; background: var(--brand-ground); padding: 12px 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips .fam-label { margin-right: 4px; }
.chips button.fam-tag { border: 0; font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.chips .fam-tag[aria-pressed="true"] { background: var(--brand-primary); color: var(--brand-on-primary); }
.fam-product__body .fam-badge { justify-self: start; }
.fam-section--primary .fam-btn--secondary { color: var(--adoa-ink, #171C22); }
/* Phone header: keep the menu on one scrolling row instead of wrapping into three. */
@media (max-width: 640px) {
  .fam-header .fam-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .fam-header .fam-nav::-webkit-scrollbar { display: none; }
  .fam-header .fam-nav a { white-space: nowrap; }
}