/* Help: owner account -> site login hand-off panel (2026-10-12). Same card language as the film hand-off (film-parts-v1.css). */
.hs-handoff { padding: 40px 0 44px; border-top: 1px solid rgba(20, 33, 29, .12); scroll-margin-top: 140px; }
.hs-handoff-card {
  display: grid; justify-items: start; gap: 12px;
  padding: 30px 34px 28px; border-radius: 22px;
  background: radial-gradient(640px 260px at 0% 0%, rgba(191, 232, 210, .6), transparent 72%), #fff;
  border: 1px solid #dbe6df;
  box-shadow: 0 2px 4px rgba(6, 17, 13, .04), 0 24px 60px -24px rgba(6, 17, 13, .28);
}
.hs-handoff-route { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.hs-handoff-route b {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.hs-handoff-route b:first-child { background: #123b2f; color: #ecf8f1; }
.hs-handoff-route b:last-child { background: #bfe8d2; color: #0b3d2c; }
.hs-handoff-route i { width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #123b2f, #2f9a72); position: relative; }
.hs-handoff-route i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 2px solid #2f9a72; border-right: 2px solid #2f9a72; transform: rotate(45deg); border-radius: 1px; }
.hs-handoff-card h3 { margin: 4px 0 0; color: #0b1a14; font-family: var(--sv-font-display, inherit); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.01em; }
.hs-handoff-text { max-width: 62ch; margin: 0; color: #4d5e56; font-size: 16px; line-height: 1.55; }
.hs-handoff-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; }
.hs-handoff-links span { color: #4d5e56; font-size: 14px; font-weight: 700; margin-right: 2px; }
.hs-handoff-links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--sv-accent-soft, #ecf8f1); color: var(--sv-link, #17533f); font-weight: 750; text-decoration: none;
  border: 1px solid rgba(23, 83, 63, .14); transition: background 200ms ease, transform 200ms ease;
}
.hs-handoff-links a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.hs-handoff-links a:hover { background: var(--sv-mint-2, #d9f3e5); transform: translateX(2px); }
.hs-handoff-links a:focus-visible { outline: 2px solid #0b7656; outline-offset: 2px; }
.hs-handoff + .hs-article { border-top: 0; }
@media (max-width: 699px) {
  .hs-handoff { padding: 30px 0 32px; scroll-margin-top: 120px; }
  .hs-handoff-card { padding: 22px 20px 20px; border-radius: 18px; gap: 10px; }
  .hs-handoff-route b { height: 28px; font-size: 12px; padding: 0 11px; }
  .hs-handoff-route i { width: 22px; }
  .hs-handoff-text { font-size: 15px; }
  .hs-handoff-links { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hs-handoff-links a { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .hs-handoff-links a { transition: none; } }
/* dark */
:root[data-theme="dark"] .hs-handoff { border-top-color: var(--line, rgba(255, 255, 255, .1)); }
:root[data-theme="dark"] .hs-handoff-card { background: radial-gradient(640px 260px at 0% 0%, rgba(127, 227, 176, .14), transparent 72%), rgba(255, 255, 255, .03); border-color: var(--line, rgba(255, 255, 255, .12)); box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 30px 70px -24px rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .hs-handoff-route b:first-child { background: #1b4a3a; color: #eef6f1; }
:root[data-theme="dark"] .hs-handoff-route b:last-child { background: rgba(127, 227, 176, .2); color: #bfe8d2; }
:root[data-theme="dark"] .hs-handoff-route i { background: linear-gradient(90deg, #3d7a64, #7fe3b0); }
:root[data-theme="dark"] .hs-handoff-route i::after { border-color: #7fe3b0; }
:root[data-theme="dark"] .hs-handoff-card h3 { color: #fff; }
:root[data-theme="dark"] .hs-handoff-text, :root[data-theme="dark"] .hs-handoff-links span { color: var(--muted, #a3b5ab); }
:root[data-theme="dark"] .hs-handoff-links a { background: rgba(127, 227, 176, .1); color: #bfe8d2; border-color: rgba(127, 227, 176, .22); }
:root[data-theme="dark"] .hs-handoff-links a:hover { background: rgba(127, 227, 176, .18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-handoff-card { background: radial-gradient(640px 260px at 0% 0%, rgba(127, 227, 176, .14), transparent 72%), rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); }
  :root:not([data-theme="light"]) .hs-handoff-route b:first-child { background: #1b4a3a; color: #eef6f1; }
  :root:not([data-theme="light"]) .hs-handoff-route b:last-child { background: rgba(127, 227, 176, .2); color: #bfe8d2; }
  :root:not([data-theme="light"]) .hs-handoff-card h3 { color: #fff; }
  :root:not([data-theme="light"]) .hs-handoff-text, :root:not([data-theme="light"]) .hs-handoff-links span { color: #a3b5ab; }
  :root:not([data-theme="light"]) .hs-handoff-links a { background: rgba(127, 227, 176, .1); color: #bfe8d2; border-color: rgba(127, 227, 176, .22); }
}
