/* The top menu and footer shared by every public page (tools/site-chrome.mjs copies the markup from the homepage). */
.bar .wrap { flex-wrap: nowrap; gap: 16px; max-width: 1640px; }
.bar .barsp { margin-left: auto; }
.nx2 { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.nx2 a, .nx2 button { white-space: nowrap; text-decoration: none; color: var(--muted); font: 650 .92rem/1 var(--sans); padding: 9px 11px; border-radius: 9px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nx2 a:hover, .nx2 button:hover, .nx2 .on { color: var(--fg); background: rgba(255,255,255,.05); }
.nx2 .hot { color: var(--gold); }
.nx2 button svg { transition: transform .2s; } .nx2 button.on svg { transform: rotate(180deg); }
.ddp .soon { font: 700 .58rem/1 var(--mono); letter-spacing: .1em; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 5px; padding: 3px 5px; }
[data-menu][hidden] { display: none !important; }
.dd { position: relative; }
.ddp { position: absolute; top: calc(100% + 10px); left: -6px; min-width: 300px; padding: 8px; border-radius: 16px; border: 1px solid rgba(255,198,94,.35); background: rgba(16,16,19,.98); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4); display: grid; gap: 2px; z-index: 40; }
.ddp a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 11px; color: var(--fg); white-space: normal; }
.ddp a:hover { background: rgba(255,198,94,.07); }
.ddp a i { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 15px; color: var(--gold); background: linear-gradient(135deg, rgba(255,198,94,.18), rgba(249,115,22,.1)); border: 1px solid rgba(255,198,94,.3); }
.ddp a b { font: 750 .92rem/1.2 var(--sans); } .ddp a small { font: 500 .78rem/1.3 var(--sans); color: var(--muted); }
.ddp .sep { height: 1px; background: var(--line); margin: 4px 6px; }
.mbtn { display: none; align-items: center; gap: 8px; font: 750 .86rem/1 var(--sans); color: var(--fg); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px; cursor: pointer; }
.sheet { position: fixed; left: 10px; right: 10px; top: 64px; z-index: 50; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 10px; border-radius: 18px; border: 1px solid rgba(255,198,94,.4); background: rgba(14,14,17,.985); box-shadow: 0 40px 90px -20px rgba(0,0,0,.9); display: grid; gap: 4px; }
.sheet h6 { font: 700 .64rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 8px 10px 4px; }
.sheet a { display: flex; justify-content: space-between; align-items: center; padding: 13px 12px; border-radius: 12px; text-decoration: none; color: var(--fg); font: 700 1rem/1 var(--sans); background: rgba(255,255,255,.025); }
.sheet a small { font: 500 .78rem/1 var(--sans); color: var(--muted); }
.sheet .cta { justify-content: center; background: linear-gradient(92deg, var(--gold), var(--ember)); color: var(--on-gold); margin-top: 6px; }
@media (max-width: 1100px) { .nx2 { display: none; } .mbtn { display: inline-flex; } }
@media (max-width: 480px) { .bar-clock { display: none; } .mbtn { margin-left: auto; } }   /* the hero keeps its own big countdown */
.nx2 .cur { color: var(--fg); }
.subbar { border-bottom: 1px solid var(--line); background: rgba(9,9,11,.5); }
.subbar .wrap { max-width: 1640px; padding-block: 8px; }
.subbar .navs { display: flex; flex-wrap: wrap; gap: 4px 18px; }
footer { padding-block: 40px 60px; border-top: 1px solid var(--line); color: var(--dim); font-size: .8rem; display: grid; gap: 10px; margin-top: 40px; }
footer .links { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); }
html.embed header.bar, html.embed .subbar, html.embed .sheet, html.embed footer { display: none !important; }
.brand span { white-space: nowrap; }
.bar .signin { padding: .7em 1.05em; font-size: .86rem; }
@media (max-width: 760px) { .bar .wrap { gap: 10px; } .bar .btn-gold { margin-left: 0; } .bar .barsp { display: none; } .mbtn { margin-left: auto; } }
.sheet-acct { display: none; }
@media (max-width: 520px) { .bar .signin { display: none; } .sheet .sheet-acct { display: block; color: var(--gold); font-weight: 700; } }

/* 11/3: the Product + Help menus come alive. Opening: the panel drops in and its rows follow one after another.
   Hover: the row slides a touch right with a gold edge, a light sweeps across it, the icon tile lifts and glows */
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ddRow { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ddSweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.ddp:not([hidden]) { animation: ddIn .22s cubic-bezier(.2,.8,.2,1) both; transform-origin: 30px 0; }
.ddp:not([hidden]) > a { animation: ddRow .28s cubic-bezier(.2,.8,.2,1) both; }
.ddp > a:nth-of-type(2) { animation-delay: .03s; } .ddp > a:nth-of-type(3) { animation-delay: .06s; } .ddp > a:nth-of-type(4) { animation-delay: .09s; } .ddp > a:nth-of-type(5) { animation-delay: .12s; } .ddp > a:nth-of-type(6) { animation-delay: .15s; }
.ddp a { position: relative; overflow: hidden; isolation: isolate; transition: background .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.ddp a::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .25s;
  background: radial-gradient(120% 140% at 0% 50%, rgba(255,198,94,.16), rgba(249,115,22,.06) 45%, transparent 75%); box-shadow: inset 0 0 0 1px rgba(255,198,94,.28), inset 3px 0 0 var(--gold); }
.ddp a::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,227,163,.14), transparent); transform: translateX(-120%) skewX(-18deg); }
.ddp a:hover, .ddp a:focus-visible { background: transparent; transform: translateX(3px); outline: none; }
.ddp a:hover::before, .ddp a:focus-visible::before { opacity: 1; }
.ddp a:hover::after, .ddp a:focus-visible::after { opacity: 1; animation: ddSweep .75s cubic-bezier(.3,.6,.3,1) both; }
.ddp a i { transition: transform .3s cubic-bezier(.2,1.4,.4,1), box-shadow .3s, background .3s, color .3s, border-color .3s; }
.ddp a:hover i, .ddp a:focus-visible i { transform: translateY(-1px) scale(1.09) rotate(-4deg); color: #fff3d6; border-color: rgba(255,198,94,.75);
  background: linear-gradient(135deg, rgba(255,198,94,.42), rgba(249,115,22,.26)); box-shadow: 0 0 0 1px rgba(255,198,94,.25), 0 6px 22px -4px rgba(255,170,60,.65), 0 0 18px rgba(255,198,94,.35); }
.ddp a b { transition: color .25s, text-shadow .25s; } .ddp a:hover b, .ddp a:focus-visible b { color: #ffe3a3; text-shadow: 0 0 14px rgba(255,198,94,.35); }
.ddp a small { transition: color .25s; } .ddp a:hover small { color: #cfc8bb; }
@media (prefers-reduced-motion: reduce) { .ddp:not([hidden]), .ddp:not([hidden]) > a, .ddp a:hover::after { animation: none; } .ddp a, .ddp a:hover, .ddp a:hover i { transform: none; } }

/* 11/3: the header's Dashboard button comes alive for members. Hover: gold glow, the avatar lights up, the ▸ slides.
   Click: it presses in and a gold ring bursts out, then the dashboard opens (acct.js waits 220 ms for it) */
@keyframes acctBurst { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
#barAcct.member { position: relative; transition: box-shadow .25s, border-color .25s, transform .15s cubic-bezier(.2,.8,.2,1), background .25s; }
#barAcct.member .av { transition: box-shadow .25s, transform .3s cubic-bezier(.2,1.4,.4,1); }
#barAcct.member:hover { border-color: rgba(255,198,94,.7); box-shadow: 0 0 0 1px rgba(255,198,94,.25), 0 8px 26px -6px rgba(255,170,60,.55); background: linear-gradient(135deg, rgba(255,198,94,.12), rgba(249,115,22,.06)); }
#barAcct.member:hover .av { transform: scale(1.12) rotate(-8deg); box-shadow: 0 0 14px rgba(255,198,94,.7); }
#barAcct.member .go { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); } #barAcct.member:hover .go { transform: translateX(3px); }
#barAcct.member:active, #barAcct.member.press { transform: scale(.95); }
#barAcct.member.press::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(255,198,94,.9); pointer-events: none; animation: acctBurst .45s cubic-bezier(.2,.8,.2,1) forwards; }
@media (prefers-reduced-motion: reduce) { #barAcct.member, #barAcct.member .av, #barAcct.member .go { transition: none; transform: none !important; } #barAcct.member.press::after { animation: none; } }
/* 11/7: phones keep Sign in in the bar (it used to hide below 520px and live only in the menu), and the open menu
   starts under the sale banner (--nxbar = banner height, set by chrome.js) so it never covers the header or its own close. */
.sheet { top: calc(64px + var(--nxbar, 0px)); max-height: calc(100dvh - 80px - var(--nxbar, 0px)); }
@media (max-width: 520px) {
  .bar .wrap { gap: 8px; }
  .bar .signin { display: inline-flex; margin-left: auto; padding: .6em .8em; font-size: .8rem; white-space: nowrap; }
  .bar .signin .av { width: 18px; height: 18px; font-size: .62rem; }
  .bar .signin ~ .mbtn { margin-left: 0; }
  .bar .btn-gold { padding: .6em .8em; font-size: .8rem; white-space: nowrap; }
  .sheet .sheet-acct { display: none; }
}
@media (max-width: 400px) { .mbtn { font-size: 0; gap: 0; padding: 9px; } }   /* icon only on small phones; the word stays for screen readers */
/* 11/7b: on small phones a long button wraps instead of pushing the page sideways (the bar keeps its own nowrap) */
@media (max-width: 400px) { main .btn, section .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; } }