/* OneBarOne Design System — vanilla port of components/core/Button.jsx
   and components/marketing/ChoiceCard.jsx (as a static, non-interactive
   "price card") for use on static landing pages (no React on this site). */

.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:16px;
  padding:13px 24px;border-radius:var(--radius-pill);
  border:var(--border-width) solid transparent;
  cursor:pointer;line-height:1;white-space:nowrap;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.ds-btn:active{transform:scale(0.97)}
.ds-btn:hover{filter:brightness(0.94)}
.ds-btn-full{display:flex;width:100%}

.ds-btn-primary{background:var(--accent);color:var(--text-on-cyan);box-shadow:var(--shadow-cyan)}
.ds-btn-marine{background:var(--surface-marine);color:#fff;box-shadow:var(--shadow-marine)}
.ds-btn-ghost{background:transparent;color:var(--text-accent);box-shadow:none}
.ds-btn-outline{background:transparent;color:var(--text-strong);box-shadow:none;border-color:var(--border-strong)}

/* Static price card — same visual language as the funnel's ChoiceCard,
   without the interactive selection state (these pages just display pricing). */
.ds-price-card{
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface-card);
  border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  box-shadow:var(--shadow-xs);
}
.ds-price-card-name{font-size:18px;font-weight:600;color:var(--text-strong)}
.ds-price-card-meta{font-size:13px;color:var(--text-muted)}
.ds-price-card-desc{font-size:14px;line-height:1.45;color:var(--text-body);margin-top:2px}
.ds-price-card-price{font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);color:var(--text-accent);margin-top:8px}
.ds-price-card-price small{font-family:var(--font-body);font-style:normal;font-size:var(--text-sm);color:var(--text-muted)}