/* Buttons
   Label roll (js/buttons.js duplicates the label) + "pushable" press: lift on hover, sink on press. */
.btn, .feature__cta {
  --lift-shadow: 0 8px 16px -8px rgba(0, 0, 0, .28);
  transition: transform .28s cubic-bezier(.3, .7, .4, 1.5), box-shadow .28s ease, filter .28s ease;
  will-change: transform;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-pill);
  font: 400 var(--fs-small)/var(--lh-small) var(--font-ui);
  cursor: pointer;
}
.btn:hover, .feature__cta:hover  { transform: translateY(-3px); }
.btn:active, .feature__cta:active { transform: translateY(1px) scale(.985); transition-duration: .05s; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* label roll: the text slides up and an identical copy slides in from below */
.roll { display: inline-block; height: 1lh; overflow: hidden; vertical-align: top; }
.roll__t { display: block; white-space: nowrap; transition: transform .7s cubic-bezier(.19, 1, .22, 1); }
a:hover > .roll > .roll__t,
button:hover > .roll > .roll__t,
a:focus-visible > .roll > .roll__t,
button:focus-visible > .roll > .roll__t { transform: translateY(-100%); }
a:hover > .roll > .roll__t:nth-child(2) { transition-delay: 0s; }

.btn--dark {
  padding: 10px 20px;
  background: var(--color-black);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-dark);
}
.btn--dark:hover { box-shadow: var(--shadow-dark), var(--lift-shadow); }
.btn--primary {
  padding: 18px 18px 18px 22px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--fs-small);
  line-height: 1;
  border: 1px solid var(--color-primary-soft);
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover { box-shadow: var(--shadow-primary), 0 10px 20px -8px rgba(35, 92, 251, .55); }
.btn--ghost {
  padding: 18px;
  color: var(--color-ink);
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #fff;                      /* solid base so lines underneath never show through */
  background-image: linear-gradient(180deg, rgba(255,255,255,.64) 40%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 95%, rgba(255,255,255,.64) 100%);
}
.btn--ghost:hover { box-shadow: 0 10px 18px -10px rgba(0, 12, 46, .25); }
.btn--primary-sm { padding: 12px 16px 12px 18px; font-size: var(--fs-small); }
.btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .feature__cta, .roll__t { transition-duration: .01ms; }
  .btn:hover, .feature__cta:hover { transform: none; }
}

/* Ghost link (nav links) */
.link-pill {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font: 500 var(--fs-small)/var(--lh-small) var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--color-text-link);
  transition: background-color .2s ease, color .2s ease;
}
.link-pill:hover { background: var(--color-line-soft); color: var(--color-black); }

/* Chip */
.chip {
  display: inline-flex;
  padding: 14px 15px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-warm);
  border: 1px solid var(--color-line-soft);
  font: 500 var(--fs-small)/16px var(--font-ui);
  color: var(--color-text);
  cursor: pointer;
}

/* Card */
.card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-card);
}
.card--elevated { box-shadow: var(--shadow-card); }

/* Card label pill (Figma 113:508): 56x26 for "Learn" = 1px border + 8px padding all round, Outfit Medium 12 uppercase.
   One rule for every card label (feature rows, About cards) at every breakpoint. */
.feature__label, .value-card__label {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  box-sizing: border-box; height: 26px; padding: 0 8px;
  border-radius: 100px;
  font: 500 12px/16px var(--font-ui); text-transform: uppercase;
  white-space: nowrap;
}
.feature__label    { background: var(--badge); color: #fff; }                     /* filled badge (Figma 111:394) */
.value-card__label { border: 1px solid var(--ink); color: var(--ink); }            /* About cards keep the outlined pill */

/* Dividers */
.rule   { height: 1px; background: var(--color-line); border: 0; margin: 0; }
.dot    { width: 12px; height: 12px; border-radius: 50%; background: var(--color-dot); border: 4px solid var(--color-line); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }