/* Dogly marketing site: compact sticky top bar with quick jumps, help and contact. Shared by the home page, landing pages, FAQ and help centre. */
:root { --sb-h: 56px; }
html { scroll-padding-top: calc(var(--sb-h) + 14px); }
.sb-skip { position: absolute; left: -999px; top: 0; background: #22201c; color: #fff; padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0; font: 600 .9rem -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.sb-skip:focus { left: 0; }
.sitebar { position: sticky; top: 0; z-index: 60; background: rgba(250, 246, 240, .94); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid #e3d8c6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; transition: box-shadow .2s ease; }
.sitebar.is-scrolled, .sitebar.open { box-shadow: 0 4px 18px rgba(34, 32, 28, .09); }
.sb-in { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; height: var(--sb-h); display: flex; align-items: center; gap: .75rem; }
.sb-brand { display: flex; align-items: center; flex: 0 0 auto; }
.sb-brand img { height: 30px; width: auto; display: block; }
.sb-links { display: none; align-items: center; gap: .1rem; margin-left: auto; }
.sb-links a { padding: .45rem .7rem; border-radius: 8px; font-size: .9rem; font-weight: 600; color: #3a362f; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.sb-links a:hover { background: #efe6d6; color: #22201c; }
.sb-links a[aria-current="true"] { background: #f3e4d2; color: #9c3d13; }
.sb-sep { width: 1px; height: 18px; background: #d9ccb8; margin: 0 .35rem; }
.sb-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.sb-demo { display: none; padding: .45rem .7rem; font-size: .9rem; font-weight: 600; color: #3a362f; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.sb-demo:hover { background: #efe6d6; }
.sb-cta { background: #2f4d3a; color: #fff; border-radius: 8px; padding: .5rem .95rem; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, transform .15s ease; }
.sb-cta:hover { background: #3f6350; transform: translateY(-1px); }
.sb-burger { width: 40px; height: 40px; border: 1px solid #ddd2c0; border-radius: 10px; background: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; }
.sb-burger span { display: block; width: 18px; height: 2px; background: #22201c; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.sitebar.open .sb-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sitebar.open .sb-burger span:nth-child(2) { opacity: 0; }
.sitebar.open .sb-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sitebar a:focus-visible, .sb-burger:focus-visible { outline: 2px solid #c05621; outline-offset: 2px; }
.sb-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: #c05621; pointer-events: none; }

.sb-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fffdf9; border-bottom: 1px solid #e3d8c6; box-shadow: 0 14px 30px rgba(34, 32, 28, .12); max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .28s ease, opacity .2s ease, visibility 0s linear .28s; }
.sitebar.open .sb-panel { max-height: calc(100vh - var(--sb-h)); opacity: 1; visibility: visible; overflow-y: auto; transition: max-height .28s ease, opacity .2s ease; }
.sb-panel-in { max-width: 1080px; margin: 0 auto; padding: .9rem 1.25rem 1.2rem; }
.sb-title { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8a8478; margin: .35rem 0 .5rem; }
.sb-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin-bottom: .6rem; }
.sb-chips a { display: block; padding: .62rem .8rem; background: #fff; border: 1px solid #e3d8c6; border-radius: 10px; font-size: .92rem; font-weight: 600; color: #22201c; text-decoration: none; }
.sb-chips a:hover, .sb-chips a[aria-current="true"] { border-color: #c05621; color: #9c3d13; }
.sb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .15rem .6rem; margin-bottom: .8rem; }
.sb-list a { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .6rem .2rem; border-bottom: 1px solid #efe6d6; font-size: .92rem; font-weight: 600; color: #3a362f; text-decoration: none; }
.sb-list a::after { content: "\203A"; color: #b8ab96; font-size: 1.1rem; }
.sb-list a:hover { color: #9c3d13; }
.sb-panel .sb-big { display: block; text-align: center; background: #c05621; color: #fff; padding: .85rem 1rem; border-radius: 10px; font-weight: 800; font-size: 1rem; text-decoration: none; }
.sb-panel .sb-big:hover { background: #9c3d13; }
.sb-note { text-align: center; font-size: .8rem; color: #6b665c; margin: .5rem 0 0; }
@media (max-width: 380px) { .sb-chips, .sb-list { grid-template-columns: 1fr; } .sb-cta { padding: .45rem .7rem; } }
@media (min-width: 1000px) {
  .sb-links { display: flex; }
  .sb-right { margin-left: .5rem; }
  .sb-demo { display: inline-block; }
  .sb-burger, .sb-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sitebar, .sb-panel, .sb-burger span, .sb-cta { transition: none; } }