/* Premium kit styles. Colours come from each page's tokens. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* demo strip: one line, sits above the page (not fixed, so it can never cover anything) */
.demo-strip { position: relative; z-index: 5; height: 34px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; background: #000; color: #E6E2DE; font-size: .8rem; white-space: nowrap; }
.demo-strip a { color: inherit; font-weight: 700; }
.demo-strip .tiers { display: inline-flex; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px; }
.demo-strip .tiers a { text-decoration: none; padding: 2px 10px; border-radius: 999px; font-weight: 600; color: #E6E2DE; }
.demo-strip .tiers a[aria-current="page"] { background: #fff; color: #000; }
@media (max-width: 520px) { .demo-strip .long { display: none; } }

/* mouse pointer */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .2s; }
.cursor.on { opacity: 1; }
.cursor::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cur, #fff); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.cursor.big::before { transform: scale(2.6); opacity: .5; }
.cursor.label::before { transform: scale(5.2); opacity: 1; }
.cursor span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-weight: 700; font-size: 12px; color: var(--cur-ink, #000); white-space: nowrap; }
@media (pointer: fine) { html.has-cursor body, html.has-cursor a, html.has-cursor button { cursor: none; } }

/* marquee, tilt, magnetic */
[data-marquee] { overflow: hidden; white-space: nowrap; }
.mq-track { display: inline-flex; will-change: transform; }
[data-tilt] { transition: transform .4s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
[data-magnetic] { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }

/* reveal on first view (only switched on when it can work) */
.reveal-on [data-reveal] { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal-on [data-reveal]:not(.in) { opacity: 0; transform: translateY(32px); }

/* floating dock */
.dock { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: var(--dock-bg, #111); color: var(--dock-fg, #fff); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); transform: translate(-50%, 140%); visibility: hidden; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s; white-space: nowrap; max-width: calc(100vw - 24px); }
.dock.on { transform: translate(-50%, 0); visibility: visible; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.dock a { text-decoration: none; font-weight: 700; font-size: .92rem; padding: 10px 14px; border-radius: 999px; color: inherit; }
.dock a:hover { background: rgba(255, 255, 255, .12); }
.dock .dock-cta { background: var(--dock-acc, #fff); color: var(--dock-acc-ink, #000); padding-inline: 18px; }
.dock .dock-cta:hover { background: var(--dock-acc, #fff); }
@media (max-width: 400px) { .dock a { padding: 9px 10px; font-size: .86rem; } .dock .dock-cta { padding-inline: 14px; } }
html.has-dock .p-foot { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }