/* Behavior styles for site.js (the original used Framer Motion and Sonner for these). */
@keyframes sg-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.sg-ticker { animation: sg-ticker 55s linear infinite; }
@keyframes sg-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sg-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
.sg-fade { animation: sg-fade .3s cubic-bezier(.22,1,.36,1) both; }
.sg-rise { animation: sg-rise .45s cubic-bezier(.22,1,.36,1) both; }
.sg-dossier .sg-overlay { opacity: 0; transition: opacity .3s; }
.sg-dossier .sg-sheet { transform: translateX(100%); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.sg-dossier.open .sg-overlay { opacity: 1; }
.sg-dossier.open .sg-sheet { transform: none; }
#sg-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: min(356px, calc(100vw - 32px)); }
.sg-toast { background: #091223; border: 1px solid rgba(239,234,225,.14); color: #efeae1; font-family: var(--font-instrument-sans), system-ui, sans-serif; padding: 16px; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; }
.sg-toast.in { opacity: 1; transform: none; }
.sg-toast-title { font-size: 13px; font-weight: 500; }
.sg-toast-desc { font-size: 13px; opacity: .75; margin-top: 2px; }
.sg-toast-error .sg-toast-title { color: #d4553c; }
@media (prefers-reduced-motion: reduce) { .sg-ticker, .sg-fade, .sg-rise { animation: none; } }

/* Home hero: the original is 92% of the screen height, so the next section shows
   as a band at the bottom of the first screen. Fill the whole screen instead, so
   the ticker sits on the bottom edge. */
@media (min-width: 1024px) {
  section.sticky.min-h-\[92svh\] { min-height: 100svh; }
  section.sticky.min-h-\[92svh\] > .min-h-\[calc\(92svh-6rem-var\(--ticker-h\)\)\] {
    min-height: calc(100svh - 6rem - var(--ticker-h));
  }
}

/* Assessment: on laptop and desktop screens the question card ran past the bottom
   of the first screen, mostly because of the decorative shield under the step list.
   Drop the shield there and tighten the card's spacing so step one fits. */
@media (min-width: 1024px) {
  .rounded-\[18px\].border-teal\/25 { margin-top: 2rem; padding: 2rem 2.5rem; }
  .rounded-\[18px\].border-teal\/25 img.opacity-45 { display: none; }
  .rounded-\[18px\].border-teal\/25 [data-stage].pt-12 { padding-top: 1.5rem; }
}

/* Assessment steps: tighter vertical spacing inside the card on laptops and desktops,
   so every step, including the contact form, fits on a 900px tall screen. */
@media (min-width: 1024px) {
  [data-stage] .rule.mt-9 { margin-top: 1.5rem; }
  [data-stage] button[data-act].py-4 { padding-top: .625rem; padding-bottom: .625rem; }
  [data-stage] p.mt-7 { margin-top: 1.25rem; }
  [data-stage] .rule.mt-10.pt-6 { margin-top: 1.5rem; padding-top: 1rem; }
  [data-stage] form.mt-12 { margin-top: 1.5rem; }
  [data-stage] form .gap-y-9 { row-gap: 1.25rem; }
  [data-stage] form .mt-9 { margin-top: 1.25rem; }
  [data-stage] form .mt-10 { margin-top: 1.5rem; }
  [data-stage] textarea { height: 4.25rem; }
  [data-act=next].mt-10 { margin-top: 1.5rem; }
  [data-act=back].mt-10 { margin-top: 1.25rem; }
}

/* Assessment page: the stepper must fit on screen with no scrolling, every step.
   On laptops and desktops the intro above the card is made compact, and on shorter
   screens the kicker row and the four facts row are dropped. */
@media (min-width: 1024px) {
  .pt-24:has(.rounded-\[18px\].border-teal\/25) { padding-top: 5.5rem; }
  .pt-24:has(.rounded-\[18px\].border-teal\/25) > .mb-12 { margin-bottom: 1.5rem; }
  .pt-24:has(.rounded-\[18px\].border-teal\/25) h1 { font-size: clamp(3rem, 5.2vw, 5rem); }
  .pt-24:has(.rounded-\[18px\].border-teal\/25) dl.mt-10 { margin-top: 1.25rem; }
  .rounded-\[18px\].border-teal\/25 { margin-top: 1.5rem; }
}
@media (min-width: 1024px) and (max-height: 1000px) {
  .pt-24:has(.rounded-\[18px\].border-teal\/25) > .mb-12,
  .pt-24:has(.rounded-\[18px\].border-teal\/25) dl.mt-10 { display: none; }
}
@media (min-width: 1024px) and (max-height: 940px) {
  .rounded-\[18px\].border-teal\/25 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .rounded-\[18px\].border-teal\/25 [data-stage].pt-12 { padding-top: 1rem; }
  [data-stage] .display { font-size: 2.125rem; }
  [data-stage] button[data-act].py-4 { padding-top: .5rem; padding-bottom: .5rem; }
  [data-stage] form .gap-y-9 { row-gap: 1rem; }
  [data-stage] textarea { height: 3rem; }
}