/* Post-purchase support hub. Keep product resources model-specific. */
.support-back-to-top {
  --support-top-round: path("M32 8 C45.255 8 56 18.745 56 32 C56 45.255 45.255 56 32 56 C18.745 56 8 45.255 8 32 C8 18.745 18.745 8 32 8 Z");
  --support-top-raised: path("M32 4 C44 4 54 17 54 32 C54 46 44 57 32 57 C20 57 10 46 10 32 C10 17 20 4 32 4 Z");
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-header) - 1);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ounin-paper);
  filter: drop-shadow(0 4px 8px rgba(38, 33, 27, .14));
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
/* Animate the shell independently so its 48px hit target stays steady. */
.support-back-to-top::before {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background: var(--ounin-hero);
  clip-path: var(--support-top-round);
  transition: clip-path 240ms cubic-bezier(.2, 1.1, .3, 1);
}
.support-back-to-top[hidden] { display: none; }
.support-back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.support-back-to-top:focus-visible { outline: 2px solid var(--ounin-sage); outline-offset: 4px; }
.support-back-to-top svg {
  position: relative;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.2, .8, .3, 1);
}
#support-page-title:focus { outline: none; }
@media (hover: hover) {
  .support-back-to-top:hover svg { transform: translateY(-2px); }
}
.support-back-to-top.is-visible:active::before {
  clip-path: var(--support-top-raised);
  transition: clip-path 190ms cubic-bezier(.16, .9, .25, 1);
}
.support-back-to-top.is-visible:active svg {
  transform: translateY(-12px);
  transition: transform 180ms cubic-bezier(.16, .9, .25, 1);
}
/* Rise as the shell rounds out; finish reshaping before the fade completes. */
.support-back-to-top.is-returning {
  pointer-events: none;
  animation: support-back-to-top-depart 320ms cubic-bezier(.2, .7, .3, 1) both;
}
.support-back-to-top.is-returning::before {
  animation: support-back-to-top-round 320ms cubic-bezier(.2, .7, .3, 1) both;
  transition: none;
}
.support-back-to-top.is-returning svg {
  animation: support-back-to-top-arrow 320ms cubic-bezier(.2, .7, .3, 1) both;
  transition: none;
}
@keyframes support-back-to-top-depart {
  0% { opacity: 1; visibility: visible; transform: none; }
  60% { opacity: .85; visibility: visible; transform: translateY(-14px); }
  100% { opacity: 0; visibility: hidden; transform: translateY(-24px) scale(.98); }
}
@keyframes support-back-to-top-round {
  0% { clip-path: var(--support-top-raised); }
  60%, 100% { clip-path: var(--support-top-round); }
}
@keyframes support-back-to-top-arrow {
  0% { transform: translateY(-12px); }
  60%, 100% { transform: none; }
}
@media (max-width: 767px) {
  .support-back-to-top { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .support-back-to-top, .support-back-to-top.is-returning,
  .support-back-to-top svg, .support-back-to-top:hover svg,
  .support-back-to-top.is-visible:active svg, .support-back-to-top.is-returning svg {
    animation: none; transition: none; transform: none;
  }
  .support-back-to-top::before, .support-back-to-top.is-visible:active::before,
  .support-back-to-top.is-returning::before { clip-path: var(--support-top-round); animation: none; transition: none; }
}

.support-page-header { padding-bottom: var(--space-7); }
.support-page-header .eyebrow { margin-bottom: var(--space-3); }
.support-page-header h1 { margin-bottom: var(--space-3); }
.support-hub-intro { max-width: 58ch; color: var(--ounin-stone); }
.support-hub-jump { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.support-hub-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border: 1px solid var(--ounin-line); border-radius: var(--radius-pill); background: var(--ounin-paper); color: var(--ounin-ink); text-decoration: none; font-size: var(--type-small); }
.support-hub-jump a:hover { border-color: var(--ounin-ink); }
.manuals-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.manuals-section > .manuals-launcher { min-width: 0; }
.support-sidebar { min-width: 0; max-width: 760px; padding: var(--space-5); border: 1px solid var(--ounin-line); border-radius: 18px; background: var(--ounin-paper); }
.support-sidebar .support-contact-item a { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .manuals-section { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--space-8); }
  .manuals-section > .support-sidebar { margin-top: -160px; }
}
.support-faq-intro .eyebrow, .support-contact-head .eyebrow { margin-bottom: var(--space-3); }
.support-faq-intro h2, .support-contact-head h2 { font-family: var(--font-serif); font-size: var(--type-h2); line-height: var(--lh-heading); }
.support-field label { display: block; margin-bottom: var(--space-2); font-size: var(--type-small); font-weight: 500; }
.support-contact-form .input { width: 100%; min-height: 48px; border-bottom: 2px solid var(--ounin-ink); }
.support-faq-intro { scroll-margin-top: 100px; padding-bottom: var(--space-5); }
#support-topics { scroll-margin-top: 100px; }
.support-faq-intro > p { color: var(--ounin-stone); margin-top: var(--space-3); }
.support-faq-intro .support-search { max-width: 760px; margin: var(--space-5) 0 0; }
.support-contact-section { scroll-margin-top: 100px; display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-9); border-top: 1px solid var(--ounin-line); }
.support-contact-head p { max-width: 44ch; margin-top: var(--space-4); color: var(--ounin-stone); }
.support-contact-panel { background: var(--ounin-paper); border: 1px solid var(--ounin-line); border-radius: 18px; overflow: hidden; }
.support-contact-form { padding: var(--space-6); }
.support-contact-form[hidden], .support-submit-success[hidden], .support-field-grid[hidden], .support-form-feedback[hidden] { display: none; }
.support-form-intro { margin-bottom: var(--space-5); color: var(--ounin-stone); }
.support-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.support-field { min-width: 0; margin-bottom: var(--space-4); }
.support-field label span { color: var(--ounin-stone); font-weight: 400; }
.support-field-hint { margin-top: var(--space-2); color: var(--ounin-stone); font-size: var(--type-small); }
.support-contact-form textarea.input { min-height: 140px; resize: vertical; }
.support-form-note { max-width: 60ch; margin-bottom: var(--space-4); color: var(--ounin-stone); font-size: var(--type-small); }
.support-contact-form .btn { min-height: 48px; }
.support-form-feedback { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid #C59A80; border-radius: var(--radius-md); background: #FFF5EF; color: var(--ounin-ink); }
.support-contact-form[aria-busy="true"] .btn { opacity: .65; }
.support-contact-form .btn:disabled { opacity: .55; cursor: not-allowed; }
.support-submit-success { padding: var(--space-7) var(--space-6); min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--ounin-sage-mist); }
.support-submit-success:focus { outline: none; }
.support-success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: var(--space-5); border-radius: 50%; background: var(--ounin-sage-deep); color: var(--ounin-paper); font-size: 30px; }
.support-submit-success .eyebrow { margin-bottom: var(--space-3); }
.support-submit-success h3 { max-width: 16ch; margin-bottom: var(--space-4); font-family: var(--font-serif); font-size: var(--type-h2); line-height: var(--lh-heading); }
.support-submit-success p { max-width: 50ch; margin-bottom: var(--space-5); }
.support-submit-success strong { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .support-contact-section { display: block; padding-top: var(--space-8); }
  .support-contact-panel { margin-top: var(--space-5); }
  .support-contact-form, .support-submit-success { padding: var(--space-5) var(--space-4); }
  .support-field-grid { grid-template-columns: 1fr; gap: 0; }
}