/* Buttons: the app's gold "Read" button, the ghost button, pills and the App Store button.
   Press feel is added by js/components/press.js (sink while held, spring back on release). */
.db-btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--h);
  padding:0 1.5rem;border:0;border-radius:var(--db-r-pill);font-family:var(--db-font);font-weight:700;
  font-size:1.0625rem;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--m-dur-fast) var(--m-ease),box-shadow var(--m-dur) var(--m-ease),filter var(--m-dur-fast) var(--m-ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.db-btn svg{width:1.2em;height:1.2em;flex:none}
.db-btn--gold{background:linear-gradient(135deg,var(--db-gold),var(--db-gold-2));color:var(--db-on-gold);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 24px rgba(247,169,59,.32),0 2px 4px rgba(120,70,0,.25)}
.db-btn--gold:hover{filter:brightness(1.04);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 30px rgba(247,169,59,.42),0 2px 4px rgba(120,70,0,.25)}
.db-btn--ghost{background:rgba(255,255,255,.1);color:var(--fg);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.db-btn--ghost:hover{background:rgba(255,255,255,.15)}
.db-light .db-btn--ghost{background:rgba(27,36,64,.07);box-shadow:0 0 0 1px rgba(27,36,64,.14) inset}
.db-btn--lg{--h:60px;padding:0 1.9rem;font-size:1.15rem}
.db-btn--sm{--h:44px;padding:0 1.1rem;font-size:.98rem}
.db-btn[disabled],.db-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:saturate(.5)}

/* App Store button: black pill with the Apple glyph, "Coming soon" state until launch */
.db-store{display:inline-flex;align-items:center;gap:.7rem;min-height:56px;padding:.5rem 1.35rem .5rem 1.1rem;border-radius:16px;
  background:#000;color:#fff;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,var(--db-shadow-1)}
.db-store svg{width:26px;height:26px;fill:currentColor}
.db-store small{display:block;font-size:.72rem;font-weight:600;opacity:.8;line-height:1.1}
.db-store b{display:block;font-size:1.2rem;font-weight:700;line-height:1.1;letter-spacing:-.01em}

/* Pills and chips (age chips, FREE chip, trust pills) */
.db-chip{display:inline-flex;align-items:center;gap:.4rem;min-height:30px;padding:0 .8rem;border-radius:var(--db-r-pill);
  font-size:.82rem;font-weight:700;background:rgba(255,255,255,.1);color:var(--fg)}
.db-chip--free{background:var(--db-free);color:#05260f;font-weight:800;letter-spacing:.08em;font-size:.7rem;text-transform:uppercase}
.db-chip--gold{background:linear-gradient(135deg,var(--db-gold),var(--db-gold-2));color:var(--db-on-gold)}
.db-chip[data-age="2-4"]{background:var(--db-age-2-4);color:#2a1502}
.db-chip[data-age="4-5"]{background:var(--db-age-4-5);color:#2a0a05}
.db-chip[data-age="5-6"]{background:var(--db-age-5-6);color:#03241b}
.db-chip[data-age="6-7"]{background:var(--db-age-6-7);color:#041c33}

@media (prefers-reduced-motion:reduce){.db-btn{transition:none}}