/* Quantia motion: short feedback, calm entrances, no continuous animation. */
.hero-copy { min-width: 0; }
h1, h2, h3 { overflow-wrap: anywhere; }
.hero-actions .button { max-width: 100%; }
.billing-toggle { min-inline-size: 0; max-width: 100%; }
.billing-toggle label { min-width: 0; }
.billing-toggle label > span { height: 100%; flex-wrap: wrap; row-gap: 0; }
.hero-visual { min-width: 0; }
.hero-visual .visual-label { max-width: 100%; }
:root {
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f4f1ebf2;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.document-body section { scroll-margin-top: 120px; }
.site-header nav > a:not(.button) { position: relative; }
.site-header nav > a:not(.button)::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-medium) var(--motion-ease);
}
.site-header nav > a:not(.button):is(:hover, :focus-visible)::after { transform: scaleX(1); }
.button {
  box-shadow: 0 4px 12px #0b3e3300;
  transition: transform var(--motion-medium) var(--motion-ease), background var(--motion-fast), box-shadow var(--motion-medium);
}
.button > span, .text-link > span {
  display: inline-block;
  transition: transform var(--motion-medium) var(--motion-ease);
}
.button:is(:hover, :focus-visible) > span { transform: translate(2px, -2px); }
.text-link:is(:hover, :focus-visible) > span { transform: translateY(3px); }
.button:active { transform: translateY(0) scale(.97); }
.menu-toggle:active { scale: .94; }
.menu-toggle { transition: scale var(--motion-fast); }
.menu-toggle span { transition: transform var(--motion-medium) var(--motion-ease); }
.menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.feature, .plan, .app-capture, .planning-capture {
  transition: translate var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium), border-color var(--motion-medium);
}
.feature-icon { transition: transform var(--motion-medium) var(--motion-ease), background var(--motion-medium); }
.plan:focus-within { box-shadow: 0 0 0 3px #0f6b5730, 0 18px 40px #0b3e330c; }
.plan.featured:focus-within { box-shadow: 0 0 0 3px #34d39970, 0 18px 40px #0b3e3315; }
.plan-price { font-variant-numeric: tabular-nums; }
/* Sliding highlight of segmented radios (added by motion.js as .motion-switch). */
.billing-toggle, .motion-switch { position: relative; isolation: isolate; }
.billing-toggle label, .motion-switch label { z-index: 1; }
.billing-indicator, .period-indicator {
  position: absolute;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
.billing-indicator {
  border-radius: 100px;
  background: var(--primary);
  box-shadow: 0 3px 8px #0b3e3315;
}
.motion-switch input:checked + span { background: transparent; }
.billing-toggle label > span { transition: color var(--motion-fast); }
.faqs summary { transition: color var(--motion-fast); }
.faqs summary:hover { color: var(--primary); }
.faqs summary::after {
  content: '+' !important;
  transition: transform var(--motion-medium) var(--motion-ease);
}
.faqs details[open] summary::after { transform: rotate(45deg); }
.document-nav nav a { border-radius: 6px; transition: background var(--motion-fast), padding-left var(--motion-medium); }
.document-nav nav a:is(:hover, :focus-visible) { background: var(--soft); padding-left: 8px; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { box-shadow: 0 8px 20px #0b3e3320; }
  .feature:hover { translate: 0 -4px; border-color: #91b6a5; box-shadow: 0 14px 28px #0b3e330a; }
  .feature:hover .feature-icon { transform: rotate(-5deg) scale(1.08); background: #cce5d8; }
  .plan:hover { translate: 0 -4px; box-shadow: 0 20px 40px #0b3e3312; }
  .hero-visual:hover .app-capture, .planning-section figure:hover .planning-capture { translate: 0 -4px; box-shadow: 0 24px 44px #21362a26; }
}
@media (max-width: 760px) {
  .site-header nav > a:not(.button)::after { width: 28px; left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button, .button > span, .text-link > span, .feature-icon { transform: none !important; }
  .feature, .plan, .app-capture, .planning-capture { translate: none !important; }
}
@media print { .site-header { position: static; } }

/* Keep navigation usable on tablets and with enlarged type. */
.feature { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 761px) and (max-width: 1100px) {
  .nav-wrap { height: 76px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--primary); }
  .menu-toggle span { width: 18px; height: 1.5px; background: currentColor; }
  .site-header nav { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 20px; background: var(--sand); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px #203d2514; flex-direction: column; align-items: stretch; gap: 8px; }
  .site-header nav.open { display: flex; }
  .site-header nav > a { padding-inline: 8px; }
}