/* Roundfy premium layer. Shared by the marketing site and the board app.
   Everything here is progressive: browsers without these features just get the plain, still-polished version. */

@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* A real spring, expressed as an easing curve (CSS linear()). Slight overshoot, settles in ~0.6s. */
  --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  /* The same idea with no overshoot, for things that must not bounce (sheets, menus). */
  --glide: linear(0, .1 3%, .32 8%, .56 14%, .76 21%, .9 29%, .97 38%, .995 50%, 1);
  accent-color: var(--accent);
  scroll-padding-top: calc(var(--nav-h, 60px) + 20px);
}

::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
html { scrollbar-color: color-mix(in srgb, currentColor 30%, transparent) transparent; scrollbar-width: thin; }
body { overscroll-behavior-y: none; font-optical-sizing: auto; font-kerning: normal; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---- Page-to-page transitions (cross-document View Transitions). The nav stays put; the page content cross-fades. ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut .18s ease both; }
  ::view-transition-new(root) { animation: vtIn .42s var(--glide) both; }
  .nav { view-transition-name: nav; }
  ::view-transition-group(nav) { animation-duration: 0s; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

/* ---- Springy press feedback (shared by every .btn) ---- */
.btn { transition-property: transform, box-shadow, background, border-color, opacity; transition-duration: .5s, .25s, .2s, .2s, .2s; transition-timing-function: var(--spring), ease, ease, ease, ease; }
.btn:active { transform: scale(.965); transition-duration: .12s; }

/* ---- Text areas that grow with what you type ---- */
textarea.input { field-sizing: content; max-height: 50dvh; }

/* ---- Numbers should not jitter when they change ---- */
.amount b, .big, .code-input, .price-pill b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "ss01"; }

/* ---- Print: marketing pages print as clean text ---- */
@media print {
  .nav, .foot, .toast, .toasts, .stage, .cta { display: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* ---- Forced colors / high contrast: keep real borders ---- */
@media (forced-colors: active) {
  .tile, .step, .plan, .panel, .bcard, .choice, .input { border: 1px solid CanvasText; }
  .plan.pop::before { display: none; }
}