:root {
    --bg-0: #050300;
    --bg-1: #0a0700;
    --bg-2: #11090a;
    --bg-3: #18100a;
    --ink-1: #f5e9c8;
    --ink-2: #c8b88a;
    --ink-3: #7a6b48;
    --ink-4: #4a3f28;
    --gold-0: #fff3b8;
    --gold-1: #ffd24a;
    --gold-2: #e8a917;
    --gold-3: #a67200;
    --gold-4: #5c4000;
    --danger: #ff5147;
    --good: #4ade80;
    --line: rgba(255, 210, 74, 0.12);
    --line-strong: rgba(255, 210, 74, 0.32);
    --shadow-gold: 0 0 40px rgba(255, 210, 74, 0.25);
    --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.55);
    --radius: 18px;
    --radius-lg: 28px;
    --max: 1320px;
    /* Type. Epilogue carries headings — it ships a REAL italic, which the hero and
       section headlines rely on (<em>run.</em>, <em>charges.</em>); a face without one
       leaves the browser to shear the uprights, and the fake slant is obvious. Inter
       carries body copy and, more importantly, every number on the site: its
       tabular figures keep prices and balances from shifting width as they tick.
       Mono is reserved for hex — addresses and tx hashes, where character-level
       comparison is the whole point. Change a face HERE and the whole site
       follows; nothing outside these three tokens should name a family. */
    --font-display: 'Epilogue', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --glass-bg: linear-gradient(135deg, rgba(255, 210, 74, 0.07) 0%, rgba(255, 210, 74, 0.015) 50%, rgba(255, 210, 74, 0.045) 100%);
    --glass-blur: blur(22px) saturate(160%);
    --glass-border: 1px solid rgba(255, 210, 74, 0.18);
    --glass-inner: inset 0 1px 0 rgba(255, 243, 184, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    background: var(--bg-0);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, #1a1003 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 70%, rgba(255, 210, 74, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 80% 90%, rgba(255, 81, 71, 0.04) 0%, transparent 60%);
    color: var(--ink-1);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    
}
body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 4;
    opacity: .035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { max-width: 100%; display: block; }
a { color: var(--gold-1); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-0); }
::selection { background: var(--gold-2); color: #000; }

/* ---------------------------------------------------------------------------------
   TOUCH + FOCUS
   Mobile browsers paint a translucent grey-blue box behind anything tappable. It is
   drawn over the element's BOUNDING BOX, so on a pill-shaped button it shows up as a
   hard-cornered rectangle sticking out past the rounded edge — which is exactly the
   artefact people report as "a blue rectangle appears when I tap a button".

   Turning it off is safe here only because every button on this site already has an
   :active state that physically presses it down (translateY / scale), so touch still
   gives immediate feedback. Never remove the highlight without that.

   Killing the tap highlight must not take keyboard users' focus ring with it, so a
   ring is declared explicitly. :focus-visible — not :focus — is what makes that
   possible: the browser shows it for keyboard navigation and withholds it for
   pointer and touch, which is the whole reason the rectangle appeared on tap in the
   first place. Applied to :root so it covers every page, not just the pixar layer.
   --------------------------------------------------------------------------------- */
html {
    -webkit-tap-highlight-color: transparent;
}
a, button, summary, [role="button"], [data-buy], input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}
:where(a, button, summary, [role="button"], input, select, textarea):focus-visible {
    outline: 3px solid var(--px-red, #eda11c);
    outline-offset: 3px;
    border-radius: 6px;
}
.grid-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background-image:
        linear-gradient(rgba(255, 210, 74, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 210, 74, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    z-index: 100; pointer-events: none;
    background: linear-gradient(90deg, var(--gold-2), var(--gold-0), var(--gold-2));
    transform: scaleX(0); transform-origin: left;
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.6);
    transition: transform .08s linear;
}
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner);
}
.tilt-3d {
    transform-style: preserve-3d;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
.tilt-3d.is-tilting {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .08s linear;
}
@media (max-width: 900px) {
.tilt-3d.is-tilting { transform: none !important; } }
.reveal {
    opacity: 0;
    transform: perspective(1200px) translateY(60px) rotateX(8deg);
    transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1);
    transform-style: preserve-3d;
}
.reveal.in { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0); }
.reveal .stagger-child { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
.reveal.in .stagger-child { opacity: 1; transform: translateY(0); }
.reveal.in .stagger-child:nth-child(1) { transition-delay: .05s; }
.reveal.in .stagger-child:nth-child(2) { transition-delay: .15s; }
.reveal.in .stagger-child:nth-child(3) { transition-delay: .25s; }
.reveal.in .stagger-child:nth-child(4) { transition-delay: .35s; }
.reveal.in .stagger-child:nth-child(5) { transition-delay: .45s; }
.reveal.in .stagger-child:nth-child(6) { transition-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal .stagger-child { transform: none !important; transition: opacity .3s !important; }
}
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: 10px;
    font-family: var(--font-body); font-weight: 700;
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    border: none; cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s;
    position: relative; overflow: hidden;
}
.btn-lg { padding: 17px 28px; font-size: 14px; }
.btn-primary {
    background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
    color: #100800;
    box-shadow: 0 8px 30px rgba(255, 210, 74, 0.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255, 210, 74, .5); }
.btn-ghost {
    background: transparent; color: var(--ink-1);
    border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--gold-1); color: var(--gold-1); background: rgba(255, 210, 74, 0.05); }
.btn-locked {
    background: linear-gradient(135deg, #1a0e02, #2a1604);
    color: var(--gold-1);
    border: 1px solid var(--gold-3);
    box-shadow: inset 0 0 20px rgba(255, 81, 71, 0.15);
}
.btn-locked::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 81, 71, 0.08) 6px 8px);
    pointer-events: none;
}
.btn-locked:hover {
    animation: shake .35s;
    box-shadow: inset 0 0 20px rgba(255, 81, 71, 0.3), 0 0 30px rgba(255, 81, 71, 0.4);
    color: var(--danger); border-color: var(--danger);
}
@keyframes shake { 0%,
 100% {transform:translateX(0)} 25% {transform:translateX(-3px)} 75% {transform:translateX(3px)} }
.lock-icon { display: inline-flex; }
.locked-label {
    margin-left: 8px; padding: 3px 8px; border-radius: 4px;
    background: var(--danger); color: #fff; font-size: 10px; letter-spacing: 2px;
}
.topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: linear-gradient(180deg, rgba(8, 5, 0, 0.85), rgba(8, 5, 0, 0.55));
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid var(--line);
}
.topnav-inner {
    max-width: var(--max); margin: 0 auto;
    padding: 14px 28px;
    display: grid; grid-template-columns: auto 1fr auto auto auto;
    align-items: center; gap: 16px;
}
.auth-actions { display: inline-flex; align-items: center; gap: 8px; }
.btn-sm { padding: 9px 16px; font-size: 11px; letter-spacing: 1.5px; gap: 6px; }
.theme-toggle {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: linear-gradient(135deg, rgba(255, 210, 74, 0.10), rgba(255, 210, 74, 0.02));
    backdrop-filter: blur(10px);
    color: var(--gold-1);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    position: relative; overflow: hidden;
}
.theme-toggle:hover { background: rgba(255, 210, 74, 0.18); border-color: var(--gold-1); transform: rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .t-sun { display: none; }
[data-theme="light"] .theme-toggle .t-moon { display: none; }
[data-theme="light"] .theme-toggle .t-sun { display: block; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 18px rgba(255, 210, 74, 0.5); }
.brand-name { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: 3px; color: var(--ink-1); }
.brand-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 2px; margin-left: 6px; }
.accent {
    background: linear-gradient(180deg, var(--gold-0), var(--gold-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.topnav-status {
    justify-self: center;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 210, 74, 0.04);
    border: 1px solid var(--line);
    font-size: 11px; color: var(--ink-2);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 900px) {
.topnav-status { display: none; }
.topnav-inner {
        display: flex; flex-wrap: wrap; align-items: center;
        padding: 12px 16px; gap: 10px;
    }
.topnav-inner .brand { margin-right: auto; }
.brand-tag { display: none; }
.brand-name { font-size: 16px; letter-spacing: 2px; }
.auth-actions { gap: 6px; }
.btn-sm { padding: 8px 12px; font-size: 10px; letter-spacing: 1px; }
}
.side-rail {
    position: fixed;
    left: max(14px, calc((100vw - var(--max)) / 2 - 150px));
    top: 50%; z-index: 40;
    padding: 10px 10px;
    background: linear-gradient(180deg, rgba(20, 12, 4, 0.55), rgba(10, 6, 2, 0.45));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255, 210, 74, 0.22);
    border-radius: 14px;
    box-shadow:
        0 22px 44px -16px rgba(0, 0, 0, 0.85),
        0 10px 22px rgba(0, 0, 0, 0.45),
        0 0 36px rgba(255, 210, 74, 0.05),
        inset 0 1px 0 rgba(255, 243, 184, 0.08);
    transform: translateY(-50%) translateZ(0);
    animation: rail-float 7s ease-in-out infinite;
    transition: box-shadow .3s, border-color .3s;
}
.side-rail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 243, 184, 0.08), transparent 40%, transparent 60%, rgba(255, 243, 184, 0.04));
    mix-blend-mode: overlay; opacity: .9;
}
.side-rail:hover {
    border-color: rgba(255, 210, 74, 0.4);
    box-shadow:
        0 36px 70px -18px rgba(0, 0, 0, 0.9),
        0 16px 36px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(255, 210, 74, 0.14),
        inset 0 1px 0 rgba(255, 243, 184, 0.14);
}
@keyframes rail-float {
    0%,
    100% { transform: translateY(-50%) translateZ(0); }
    50% { transform: translateY(calc(-50% - 8px)) translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
.side-rail { animation: none; }
}
.side-rail ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.side-rail li {
    display: grid; grid-template-columns: 10px 18px 1fr;
    align-items: center; gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--ink-3); letter-spacing: 1.4px; text-transform: uppercase;
    cursor: pointer; transition: color .2s, background .2s;
    outline: none;
    white-space: nowrap;
}
.side-rail li:hover { color: var(--gold-1); background: rgba(255, 210, 74, 0.04); }
.side-rail li em { font-style: normal; color: var(--ink-2); font-weight: 600; font-size: 9.5px; }
.side-rail .rail-tick {
    width: 6px; height: 6px; border-radius: 50%;
    border: 1px solid var(--ink-3);
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.side-rail li.is-active {
    color: var(--gold-1);
    background: rgba(255, 210, 74, 0.08);
}
.side-rail li.is-active em { color: var(--gold-1); }
.side-rail li.is-active .rail-tick { background: var(--gold-1); border-color: var(--gold-1); box-shadow: 0 0 8px var(--gold-1); }

@media (max-width: 1540px) {
.side-rail { display: none; } }
.section {
    max-width: var(--max); margin: 0 auto;
    padding: 130px 36px;
    position: relative; z-index: 5;
}
.section-eyebrow {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 24px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--gold-1); letter-spacing: 4px; text-transform: uppercase;
}
.section-eyebrow .num {
    padding: 4px 10px; border-radius: 6px;
    background: rgba(255, 210, 74, 0.1);
    border: 1px solid var(--line-strong);
}
.section-eyebrow .rule { flex: 0 0 80px; height: 1px; background: linear-gradient(90deg, var(--gold-3), transparent); }
.section-eyebrow .lbl.danger { color: var(--danger); }
.section-headline {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(28px, 6vw, 84px);
    line-height: 1.02; letter-spacing: -1px;
    color: var(--ink-1); margin-bottom: 60px;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.hero {
    position: relative;
    padding: 140px 36px 80px;
    z-index: 5; overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    opacity: .35;
}
.hero-bg-svg,
.hero-bull-svg {
    width: 110%; height: 100%; position: absolute; left: -5%; top: 5%;
}
.hero-grid {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 60px; align-items: center; min-height: 86vh;
}
.hero-left { position: relative; z-index: 2; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 210, 74, 0.1), rgba(255, 210, 74, 0.02));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-strong);
    color: var(--ink-2); font-size: 10.5px;
    letter-spacing: 2px; text-transform: uppercase;
    font-family: var(--font-mono);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: pulse 1.6s infinite; }
.chip .dot.live { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.hero-headline {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(38px, 6vw, 92px);
    line-height: .95; letter-spacing: -1.5px;
    color: var(--ink-1); text-transform: uppercase;
    margin-bottom: 32px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.hero-headline .line { display: block; }
.hero-headline .line-2 em {
    font-style: italic; font-weight: 700;
    background: linear-gradient(180deg, var(--gold-0), var(--gold-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-headline .line-3 .big-it em {
    font-style: italic; font-weight: 900;
    background: linear-gradient(180deg, var(--gold-0), var(--gold-2) 50%, var(--gold-3));
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s ease-in-out infinite;
    text-shadow: 0 0 40px rgba(255, 210, 74, 0.4);
}
@keyframes shimmer { 50% { background-position: 100% 50%; } }
.hero-lede {
    font-size: 17px; color: var(--ink-2);
    max-width: 540px; margin-bottom: 32px;
}
.hero-lede b { color: var(--ink-1); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-right { display: flex; flex-direction: column; align-items: center; gap: 30px; position: relative; }
.coin-dome {
    position: relative; width: 360px; height: 360px;
    max-width: 80vw; display: flex; align-items: center; justify-content: center;
}
.coin-glow {
    position: absolute; inset: -25%;
    background: radial-gradient(circle, rgba(255, 210, 74, 0.5) 0%, transparent 60%);
    filter: blur(40px); animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.1); opacity: .65; } }
.coin-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 210, 74, 0.3); }
.ring-1 { inset: -20px; animation: spin 24s linear infinite; }
.ring-2 { inset: -45px; border-style: dotted; border-color: rgba(255, 210, 74, 0.18); animation: spin 36s linear infinite reverse; }
.ring-3 { inset: -75px; border-color: rgba(255, 210, 74, 0.1); animation: spin 50s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.coin {
    width: 100%; height: 100%; object-fit: contain; border-radius: 50%;
    box-shadow: 0 0 80px rgba(255, 210, 74, 0.4), inset 0 0 60px rgba(0, 0, 0, 0.5);
    animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-12px) rotate(2deg); } }
.coin-shine {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    background-size: 200% 200%; animation: shine 5s ease-in-out infinite;
    mix-blend-mode: overlay;
}
@keyframes shine { 100% { background-position: -100% 0; } }
.terminal { width: 100%; max-width: 360px; border-radius: 14px; overflow: hidden; }
.terminal-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--line);
}
.tdot { width: 10px; height: 10px; border-radius: 50%; }
.t-red { background: #ff5f57; }
.t-amber { background: #febc2e; }
.t-green { background: #28c840; }
.terminal-title {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 1px;
    margin-left: 10px;
}
.terminal-body {
    padding: 16px 18px; font-size: 12px;
    color: var(--ink-2);
    display: flex; flex-direction: column; gap: 6px;
}
.terminal-body div { font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-prompt { color: var(--gold-1); margin-right: 6px; }
.t-ok { color: var(--good); }
.t-warn { color: var(--danger); }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: .35; } }
.terminal-input { display: flex; align-items: center; }
.t-caret { display: inline-block; width: 8px; height: 14px; background: var(--gold-1); margin-left: 6px; animation: blink 0.8s steps(2) infinite; }
.livetx-section { padding: 56px 28px 24px; position: relative; z-index: 2; }
.livetx-wrap { max-width: 860px; margin: 0 auto; }
.livetx-term { max-width: 100%; }
.livetx-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #7af0a8;
    box-shadow: 0 0 8px rgba(122, 240, 168, 0.75);
    margin-left: auto;
    animation: livetx-pulse 1.4s infinite;
}
@keyframes livetx-pulse { 50% { opacity: .35; } }
.livetx-body {
    padding: 8px 10px;
    font-size: 12px;
    max-height: 360px;
    overflow-y: auto;
    gap: 3px;
}
.livetx-body::-webkit-scrollbar { width: 5px; }
.livetx-body::-webkit-scrollbar-thumb { background: rgba(255, 210, 74, 0.22); border-radius: 3px; }
.livetx-loading { color: var(--ink-3); font-style: italic; padding: 14px; }
.livetx-row {
    display: grid;
    grid-template-columns: 62px 1fr auto 56px;
    column-gap: 14px;
    align-items: center;
    padding: 9px 12px 9px 14px;
    border-left: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 210, 74, 0.015);
    transition: background .2s, border-left-color .2s;
    white-space: nowrap;
    position: relative;
}
.livetx-row:hover { background: rgba(255, 210, 74, 0.06); }
.livetx-row + .livetx-row { margin-top: 1px; }
.livetx-row.kind-mint { border-left-color: rgba(122, 240, 168, 0.55); }
.livetx-row.kind-burn { border-left-color: rgba(255, 122, 122, 0.55); }
.livetx-row.kind-swap { border-left-color: rgba(255, 210, 74, 0.55); }
.livetx-row.kind-send { border-left-color: rgba(205, 191, 154, 0.35); }
.livetx-row.is-fresh { animation: livetx-flash 1.2s ease-out; }
@keyframes livetx-flash {
    0% { background: rgba(122, 240, 168, 0.18); }
    100% { background: rgba(255, 210, 74, 0.015); }
}
.livetx-kind {
    font-weight: 800;
    letter-spacing: 1.3px;
    font-size: 9.5px;
    padding: 3px 0;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid transparent;
    font-family: var(--font-mono);
}
.livetx-kind.mint { background: rgba(122, 240, 168, 0.13); color: #7af0a8; border-color: rgba(122, 240, 168, 0.28); }
.livetx-kind.burn { background: rgba(255, 122, 122, 0.13); color: #ff8a8a; border-color: rgba(255, 122, 122, 0.28); }
.livetx-kind.swap { background: rgba(255, 210, 74, 0.13); color: #FFD24A; border-color: rgba(255, 210, 74, 0.28); }
.livetx-kind.send { background: rgba(205, 191, 154, 0.13); color: #cdbf9a; border-color: rgba(205, 191, 154, 0.22); }
.livetx-addrs {
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.livetx-addrs a {
    color: var(--gold-1);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 210, 74, 0.3);
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
}
.livetx-addrs a:hover { color: var(--gold-0); border-color: var(--gold-0); }
.livetx-arrow {
    display: inline-block;
    color: var(--ink-3);
    margin: 0 6px;
    font-weight: 400;
    opacity: 0.7;
}
.livetx-amt {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gold-0);
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    letter-spacing: 0.2px;
}
.livetx-amt a { color: inherit; text-decoration: none; }
.livetx-amt a:hover { text-shadow: 0 0 8px rgba(255, 210, 74, 0.5); }
.livetx-amt-unit {
    color: var(--ink-3);
    font-weight: 500;
    font-size: 10.5px;
    margin-left: 4px;
    letter-spacing: 0.8px;
}
.livetx-when {
    color: var(--ink-3);
    font-size: 11px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: 0.5px;
}
.livetx-empty {
    color: var(--ink-3);
    padding: 22px 0;
    text-align: center;
    font-family: var(--font-mono);
    letter-spacing: 1px;
    font-size: 11px;
}
[data-theme="light"] .livetx-body { color: #e8d8a8; }

@media (max-width: 640px) {
.livetx-section { padding: 40px 12px 12px; }
.livetx-row {
        grid-template-columns: 52px 1fr auto;
        column-gap: 10px;
        padding: 8px 10px;
    }
.livetx-when { grid-column: 2 / span 2; text-align: left; margin-top: 4px; }
.livetx-amt { font-size: 12.5px; }
.livetx-addrs { font-size: 11.5px; }
}

@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.coin-dome { width: 280px; height: 280px; }
}
.marquee {
    position: relative; z-index: 5;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(255, 210, 74, 0.04), rgba(255, 210, 74, 0.08), rgba(255, 210, 74, 0.04));
    overflow: hidden;
}
.marquee-lane { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-lane + .marquee-lane { margin-top: 10px; }
.marquee-track {
    display: flex; gap: 36px; white-space: nowrap;
    font-family: var(--font-display); font-size: 28px; letter-spacing: 2px;
    font-weight: 700; text-transform: uppercase;
    color: var(--ink-1);
}
.lane-fwd .marquee-track { animation: marquee-fwd 50s linear infinite; }
.lane-rev .marquee-track {
    animation: marquee-rev 60s linear infinite;
    font-family: var(--font-mono); font-size: 14px;
    color: var(--ink-3); font-weight: 400; letter-spacing: 4px;
}
@keyframes marquee-fwd { to { transform: translateX(-50%); } }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.m-item b { color: var(--danger); }
.m-sep { color: var(--gold-1); opacity: .5; }
.m-item.small { font-size: 12px; }
.bento-section { padding-top: 140px; }
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 18px;
}
.bento-tile {
    position: relative; overflow: hidden;
    padding: 30px 28px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    display: flex; flex-direction: column;
    transition: border-color .3s, box-shadow .3s;
}
.bento-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-gold), var(--glass-inner); }
.bento-tile::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 210, 74, 0.18), transparent 50%);
    opacity: 0; transition: opacity .3s;
}
.bento-tile:hover::before { opacity: 1; }
.tile-tag {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--gold-1); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: auto;
}
.big-num {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(56px, 7vw, 112px); line-height: .85;
    color: var(--ink-1);
    background: linear-gradient(180deg, var(--gold-0), var(--gold-2) 60%, var(--gold-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 14px 0;
    display: flex; align-items: baseline; gap: 4px;
    overflow-wrap: break-word;
}
.big-num sup {
    font-size: 0.35em; font-weight: 700;
    -webkit-text-fill-color: var(--gold-1);
    color: var(--gold-1);
    margin-left: 6px;
}
.big-num-slash {
    opacity: .35; font-size: .7em;
    -webkit-text-fill-color: var(--ink-3);
    color: var(--ink-3);
    margin: 0 6px;
}
.tile-cap { color: var(--ink-2); font-size: 14px; margin-top: 6px; line-height: 1.5; }
.tile-cap.centered { text-align: center; }
.tile-sub { color: var(--ink-3); font-size: 11px; letter-spacing: 2px; margin-top: 12px; opacity: .8; }
.tile-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(34px, 4vw, 58px); line-height: .95;
    color: var(--ink-1); margin: 12px 0 8px;
    text-transform: uppercase;
}
.tile-title.big { font-size: clamp(38px, 4.5vw, 64px); }
.tile-mono {
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(24px, 2.5vw, 38px); line-height: 1;
    color: var(--gold-1); margin: 14px 0 12px;
    letter-spacing: -1px;
}
.tile-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.tile-stat .counter {
    font-family: var(--font-display); font-weight: 900;
    font-size: 56px; color: var(--ink-1);
}
.tile-stat sup { font-size: 22px; color: var(--gold-1); }
.tile-stat small { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.strikethrough { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--ink-3); text-decoration-color: var(--gold-2); }
.bento-supply { grid-column: span 3; }
.bento-tax { grid-column: span 3; }
.bento-community { grid-column: span 4; }
.bento-admin { grid-column: span 2; }
.bento-contract { grid-column: span 3; }
.bento-sigil { grid-column: span 3; align-items: center; justify-content: center; }
.bento-sigil .sigil-img { width: 80px; height: 80px; border-radius: 50%; margin: 10px auto; box-shadow: 0 0 24px rgba(255, 210, 74, 0.4); }

@media (max-width: 1100px) {
.bento { grid-template-columns: repeat(4, 1fr); }
.bento-supply { grid-column: span 4; }
.bento-tax,
.bento-community { grid-column: span 2; }
.bento-admin { grid-column: span 2; grid-row: span 1; }
.bento-contract { grid-column: span 2; }
.bento-sigil { grid-column: span 4; }
}
@media (max-width: 700px) {
.bento { grid-template-columns: 1fr; }
.bento-tile { grid-column: span 1 !important; grid-row: auto !important; }
}
.vault-section { position: relative; }
.vault-grid {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: 70px; align-items: center;
}
.vault-visual {
    display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.lock-orb {
    position: relative; width: 320px; height: 320px;
    display: flex; align-items: center; justify-content: center;
}
.lock-svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 40px rgba(255, 210, 74, 0.25)); }
.lock-rays {
    position: absolute; inset: -30%; pointer-events: none;
    background:
        conic-gradient(from 0deg, transparent 0deg, rgba(255, 210, 74, 0.08) 30deg, transparent 60deg,
                       transparent 120deg, rgba(255, 210, 74, 0.06) 150deg, transparent 180deg,
                       transparent 240deg, rgba(255, 210, 74, 0.08) 270deg, transparent 300deg);
    animation: spin 30s linear infinite;
    mask-image: radial-gradient(circle, transparent 30%, #000 60%, transparent 90%);
}
.lock-meta {
    width: 100%; max-width: 360px;
    padding: 20px 22px; border-radius: 14px;
    display: grid; grid-template-columns: 1fr; gap: 14px;
}
.lock-meta > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.lock-meta em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 2.5px; text-transform: uppercase; }
.lock-meta b { font-size: 13px; }
.lock-meta .danger { color: var(--danger); }
.vault-copy { }
.vault-headline {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(26px, 5vw, 64px); line-height: 1.02;
    letter-spacing: -1px; margin-bottom: 26px;
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.vault-copy p { color: var(--ink-2); margin-bottom: 16px; font-size: 16px; }
.vault-copy p b,
.vault-copy p em { color: var(--ink-1); }
.vault-copy p em { font-style: italic; }
.danger { color: var(--danger); }
.big-countdown {
    margin: 30px 0 28px;
    padding: 26px 28px; border-radius: 18px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.cd-label { font-size: 10.5px; letter-spacing: 4px; color: var(--gold-1); margin-bottom: 16px; }
.cd-cells { display: flex; align-items: flex-end; gap: 8px; }
.cd-cells > div:not(.sep) { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cd-cells span {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(36px, 5vw, 64px); line-height: 1;
    color: var(--ink-1);
    text-shadow: 0 0 24px rgba(255, 210, 74, 0.3);
}
.cd-cells em { font-style: normal; font-size: 10px; color: var(--ink-3); letter-spacing: 2.5px; text-transform: uppercase; }
.cd-cells .sep {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(36px, 5vw, 64px); color: var(--gold-1);
    line-height: 1; opacity: .5;
}
.vault-checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vault-checklist li {
    display: grid; grid-template-columns: 26px 1fr; gap: 10px;
    color: var(--ink-2); font-size: 14px; line-height: 1.5;
}
.vault-checklist .check {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(74, 222, 128, 0.12);
    color: var(--good); font-size: 12px; font-weight: 700;
    border: 1px solid rgba(74, 222, 128, 0.4);
}
.vault-checklist b { color: var(--ink-1); }

@media (max-width: 900px) {
.vault-grid { grid-template-columns: 1fr; gap: 40px; }
.lock-orb { width: 240px; height: 240px; }
}
.tokenomics-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.ring-chart { display: flex; justify-content: center; }
.donut { width: 100%; max-width: 380px; filter: drop-shadow(0 0 30px rgba(255, 210, 74, 0.3)); }
.donut-big { font-family: var(--font-display); font-size: 30px; fill: var(--ink-1); font-weight: 900; }
.donut-small { font-family: var(--font-mono); font-size: 7px; fill: var(--ink-3); letter-spacing: 3px; }
.legend { display: flex; flex-direction: column; gap: 12px; }
.legend-row {
    display: grid; grid-template-columns: 18px 1fr 1.5fr 50px;
    align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 210, 74, 0.05), rgba(255, 210, 74, 0.01));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    transition: border-color .2s, transform .2s;
}
.legend-row:hover { transform: translateX(4px); border-color: var(--c); }
.legend-bullet { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.legend-label { color: var(--ink-1); font-size: 14px; }
.legend-bar { height: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; }
.legend-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--gold-0)); border-radius: 999px; }
.legend-val { font-family: var(--font-mono); font-size: 14px; color: var(--gold-1); text-align: right; font-weight: 600; }
.spec-grid {
    margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    padding-top: 22px; border-top: 1px solid var(--line);
}
.spec-grid > div { display: flex; flex-direction: column; gap: 4px; }
.spec-grid em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 2px; text-transform: uppercase; }
.spec-grid b { color: var(--ink-1); font-weight: 600; font-size: 15px; }
.mono { font-family: var(--font-mono); }

@media (max-width: 900px) {
.tokenomics-grid { grid-template-columns: 1fr; } }
.trust-row { margin-bottom: 50px; }
.trust-row:last-of-type { margin-bottom: 0; }
.trust-row-label {
    display: flex; align-items: center; gap: 16px;
    justify-content: center;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--gold-1); letter-spacing: 5px; text-transform: uppercase;
    margin-bottom: 24px;
}
.trust-row-label .bar { flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.trust-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.trust-feature {
    position: relative; display: grid; grid-template-columns: auto 1fr;
    gap: 22px; align-items: center; padding: 28px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); border-radius: var(--radius);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}
.trust-feature::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--brand-a, var(--gold-1)), var(--brand-b, var(--gold-2)));
    opacity: .85;
}
.trust-feature::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, var(--brand-a, var(--gold-1)) 0%, transparent 65%);
    opacity: .08; transition: opacity .35s; pointer-events: none;
}
.trust-feature:hover { border-color: var(--line-strong); box-shadow: var(--shadow-gold), var(--glass-inner); }
.trust-feature:hover::after { opacity: .18; }
.trust-logo { width: 72px; height: 72px; flex-shrink: 0; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.trust-logo svg { width: 100%; height: 100%; display: block; }
.trust-feature-body { display: flex; flex-direction: column; gap: 6px; }
.trust-tag {
    align-self: flex-start;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--gold-1); letter-spacing: 3px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255, 210, 74, 0.08); border: 1px solid var(--line-strong);
}
.trust-feature h3 { font-family: var(--font-display); font-size: 22px; color: var(--ink-1); letter-spacing: 1px; }
.trust-feature p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.trust-pill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust-pill {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); border-radius: 14px;
    box-shadow: var(--glass-shadow), var(--glass-inner);
    transition: border-color .25s, box-shadow .25s;
    position: relative; overflow: hidden;
}
.trust-pill::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--brand, var(--gold-1));
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s;
}
.trust-pill:hover { border-color: var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), var(--glass-inner); }
.trust-pill:hover::after { transform: scaleX(1); }
.pill-logo { width: 40px; height: 40px; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.pill-text h4 { font-family: var(--font-display); font-size: 15px; color: var(--ink-1); margin-bottom: 2px; }
.pill-text small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 1.5px; text-transform: uppercase; }

@media (max-width: 800px) {
.trust-feature-grid { grid-template-columns: 1fr; }
.trust-pill-grid { grid-template-columns: repeat(2, 1fr); }
}
.roadmap-section { padding-right: 0; }
.roadmap-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 30px; margin-bottom: 50px; padding-right: 36px;
}
.roadmap-controls { display: flex; gap: 8px; }
.rm-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255, 210, 74, 0.05);
    border: 1px solid var(--line-strong);
    color: var(--gold-1); font-size: 22px; cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s, transform .2s, border-color .2s;
}
.rm-btn:hover { background: rgba(255, 210, 74, 0.15); transform: translateY(-2px); border-color: var(--gold-1); }
.rm-scroller {
    display: flex; gap: 22px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding: 0 36px;
    padding: 10px 36px 30px 0;
    scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent;
}
.rm-scroller::-webkit-scrollbar { height: 6px; }
.rm-scroller::-webkit-scrollbar-thumb { background: var(--gold-3); border-radius: 3px; }
.rm-card {
    flex: 0 0 380px; scroll-snap-align: start;
    padding: 32px 28px; border-radius: var(--radius);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    display: flex; flex-direction: column; min-height: 360px;
    position: relative; overflow: hidden;
    transition: transform .3s, border-color .3s;
}
.rm-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.rm-card.node-active { border-color: var(--line-strong); box-shadow: var(--shadow-gold); }
.rm-card.node-locked { opacity: .6; }
.rm-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rm-phase { font-size: 11px; color: var(--gold-1); letter-spacing: 3px; }
.rm-status { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.rm-dot { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
.rm-dot.done { background: var(--good); color: #042; }
.rm-dot.live { background: var(--gold-1); box-shadow: 0 0 10px var(--gold-1); animation: pulse 1.4s infinite; }
.rm-dot.locked { background: transparent; color: var(--ink-3); }
.rm-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: 32px; line-height: 1; letter-spacing: -.5px;
    color: var(--ink-1); margin-bottom: 18px; text-transform: uppercase;
}
.rm-items { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rm-items li {
    padding-left: 20px; position: relative;
    color: var(--ink-2); font-size: 14px;
}
.rm-items li::before {
    content: '▸'; position: absolute; left: 0; color: var(--gold-1);
}
.rm-card-foot { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 10px; color: var(--ink-3); letter-spacing: 2px; }

@media (max-width: 700px) {
.roadmap-header { flex-direction: column; align-items: flex-start; padding-right: 24px; }
.rm-card { flex-basis: 86%; }
}
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 920px; }
.faq-item {
    border-radius: 14px; overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .25s;
}
.faq-item:hover { transform: translateX(2px); }
.faq-item[open] {
    border-color: var(--line-strong);
    background: linear-gradient(135deg, rgba(255, 210, 74, 0.10), rgba(255, 210, 74, 0.02));
    box-shadow: var(--shadow-gold), var(--glass-inner);
}
.faq-item summary {
    cursor: pointer; padding: 22px 26px;
    display: grid; grid-template-columns: 50px 1fr 30px;
    align-items: center; gap: 18px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { color: var(--gold-1); font-size: 13px; letter-spacing: 2px; }
.faq-q { font-size: 16px; color: var(--ink-1); font-weight: 600; }
.faq-toggle {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 210, 74, 0.1); color: var(--gold-1);
    font-size: 18px; transition: transform .25s, background .25s;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--gold-1); color: #000; }
.faq-item p { padding: 0 26px 24px 94px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 600px) {
.faq-item summary { grid-template-columns: 30px 1fr 30px; padding: 18px 18px; }
.faq-item p { padding: 0 18px 20px 18px; }
}
.site-footer {
    position: relative; z-index: 5;
    padding: 80px 36px 30px;
    border-top: 1px solid var(--line);
    overflow: hidden;
}
.footer-wordmark {
    position: absolute; left: 0; right: 0; bottom: -30px;
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(58px, 18vw, 280px);
    line-height: .8; letter-spacing: -6px;
    text-align: center; white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 210, 74, 0.18) 0%, transparent 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none; user-select: none;
}
.footer-grid {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 2fr;
    gap: 40px; align-items: start;
    position: relative; z-index: 2;
}
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand .brand-name { font-size: 22px; }
.foot-brand small { color: var(--ink-3); font-size: 12px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.foot-cols h4 { font-size: 11px; color: var(--gold-1); letter-spacing: 3px; margin-bottom: 14px; }
.foot-cols a,
.foot-cols small {
    display: block; color: var(--ink-2); font-size: 13px;
    padding: 4px 0; transition: color .2s;
}
.foot-cols a:hover { color: var(--gold-1); }
.foot-cols small { color: var(--ink-3); font-size: 11px; letter-spacing: 1px; }
.footer-meta {
    max-width: var(--max); margin: 60px auto 0;
    padding-top: 24px; border-top: 1px dashed var(--line);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    font-size: 11px; color: var(--ink-3); letter-spacing: 2px;
    position: relative; z-index: 2;
}
@media (max-width: 800px) {
.footer-grid { grid-template-columns: 1fr; }
.foot-cols { grid-template-columns: 1fr 1fr; }
}
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); backdrop-filter: blur(10px); animation: fade .2s; }
.modal-card {
    position: relative;
    border-radius: var(--radius);
    padding: 40px 30px; max-width: 440px; text-align: center;
    animation: rise .25s;
    border-color: rgba(255, 81, 71, 0.4) !important;
}
.modal-lock { font-size: 56px; margin-bottom: 14px; }
.modal-card h3 { font-family: var(--font-display); font-size: 24px; color: var(--danger); letter-spacing: 2px; margin-bottom: 10px; }
.modal-card p { color: var(--ink-2); margin-bottom: 14px; }
.modal-code { font-size: 12px; color: var(--ink-3); padding: 10px; background: rgba(0,0,0,.4); border-radius: 6px; margin-bottom: 20px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }

@media (max-width: 768px) {
.section { padding: 80px 20px; }
.hero { padding: 110px 20px 60px; }
.hero-grid { gap: 30px; }
.hero-headline { letter-spacing: -1px; }
.hero-headline .line-3 .big-it em { text-shadow: 0 0 24px rgba(255, 210, 74, 0.3); }
.hero-tags { margin-bottom: 24px; gap: 6px; }
.chip { padding: 5px 10px; font-size: 10px; }
.hero-lede { font-size: 15px; }
.terminal { max-width: 100%; }
.coin-dome { width: 240px; height: 240px; }
.topnav-inner { padding: 12px 14px; }
.topnav .nav-cta span:not(.lock-icon) { display: none; }
.topnav .nav-cta { padding: 10px 12px; }
.marquee { padding: 22px 0; }
.marquee-track { font-size: 22px; gap: 24px; }
.lane-rev .marquee-track { font-size: 12px; }
.section-headline { margin-bottom: 40px; }
.section-eyebrow .rule { flex-basis: 30px; }
.bento-section { padding-top: 80px; }
.bento { gap: 14px; }
.bento-tile { padding: 24px 22px; }
.tile-title.big { font-size: clamp(30px, 8vw, 48px); }
.vault-grid { gap: 30px; }
.lock-orb { width: 200px; height: 200px; }
.lock-meta { padding: 16px; gap: 10px; }
.big-countdown { padding: 20px; }
.cd-cells .sep { display: none; }
.cd-cells { gap: 6px; }
.cd-cells span { font-size: clamp(28px, 12vw, 48px) !important; }
.roadmap-header { padding-right: 20px; }
.rm-scroller { padding: 10px 20px 24px 0; scroll-padding-left: 20px; }
.rm-card { flex-basis: 86%; min-height: 320px; padding: 26px 22px; }
.rm-title { font-size: 26px; }
.faq-item summary { padding: 16px 18px; gap: 10px; }
.faq-q { font-size: 14.5px; }
.faq-item p { font-size: 14px; }
.site-footer { padding: 60px 20px 24px; }
.footer-grid { gap: 26px; }
.foot-cols { grid-template-columns: 1fr; gap: 18px; }
.footer-meta { font-size: 10px; gap: 10px; }
.footer-wordmark { bottom: -14px; }
}

@media (max-width: 380px) {
.section,
.hero,
.site-footer { padding-left: 16px; padding-right: 16px; }
.topnav-inner { padding: 10px 12px; gap: 8px; }
.brand-name { font-size: 14px; letter-spacing: 1.5px; }
.brand-logo { width: 34px; height: 34px; }
.modal-card { padding: 30px 22px; }
}
[data-theme="light"] {
    --bg-0: #fbf6e8;
    --bg-1: #f4ecd2;
    --bg-2: #ede1b3;
    --bg-3: #e2cf89;

    --ink-1: #1d1606;
    --ink-2: #4c3a18;
    --ink-3: #7a6125;
    --ink-4: #a6884a;

    --gold-0: #c4870e;
    --gold-1: #a87208;
    --gold-2: #8a5e05;
    --gold-3: #6b4500;
    --gold-4: #4a2e00;

    --danger: #d63838;
    --good: #15803d;

    --line: rgba(168, 114, 8, 0.22);
    --line-strong: rgba(168, 114, 8, 0.38);
    --shadow-gold: 0 0 36px rgba(168, 114, 8, 0.18);
    --shadow-deep: 0 18px 44px rgba(60, 40, 0, 0.14);

    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 252, 240, 0.55) 100%);
    --glass-border: 1px solid rgba(168, 114, 8, 0.24);
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(60, 40, 0, 0.05);
    --glass-shadow: 0 8px 26px rgba(60, 40, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"] body {
    background: #fbf6e8;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, #fcecbf 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 70%, rgba(168, 114, 8, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 80% 90%, rgba(214, 56, 56, 0.05) 0%, transparent 60%);
}
[data-theme="light"] body::before { opacity: .025; mix-blend-mode: multiply; }
[data-theme="light"] .grid-overlay {
    background-image:
        linear-gradient(rgba(168, 114, 8, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 114, 8, 0.07) 1px, transparent 1px);
}
[data-theme="light"] .topnav {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.88), rgba(251, 246, 232, 0.62));
    border-bottom: 1px solid var(--line);
}
[data-theme="light"] .nav-links a { color: var(--ink-2); }
[data-theme="light"] .side-rail {
    background: linear-gradient(180deg, rgba(255, 252, 240, 0.85), rgba(248, 240, 215, 0.7));
    border-color: rgba(168, 114, 8, 0.3);
    box-shadow:
        0 22px 44px -16px rgba(60, 40, 0, 0.25),
        0 10px 22px rgba(60, 40, 0, 0.1),
        0 0 36px rgba(168, 114, 8, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .accent {
    background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero-headline .line-2 em,
[data-theme="light"] .hero-headline .line-3 .big-it em,
[data-theme="light"] .big-num {
    background: linear-gradient(180deg, var(--gold-0), var(--gold-2) 60%, var(--gold-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .shimmer {
    background: linear-gradient(110deg, var(--gold-3) 0%, var(--gold-0) 45%, var(--gold-2) 55%, var(--gold-3) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .btn-locked {
    background: linear-gradient(135deg, #fff1d5, #fadeaa);
    color: #6b4500;
    border-color: var(--gold-2);
}
[data-theme="light"] .terminal {
    background: linear-gradient(180deg, #1a1306, #0a0700);
    color: #e8d8a8;
    border: 1px solid rgba(168, 114, 8, 0.45);
}
[data-theme="light"] .terminal-body { color: #e8d8a8; }
[data-theme="light"] .donut-big { fill: var(--ink-1); }
[data-theme="light"] .donut-small { fill: var(--ink-3); }
[data-theme="light"] .donut { filter: drop-shadow(0 0 24px rgba(168, 114, 8, 0.18)); }
[data-theme="light"] .section-eyebrow .num {
    background: rgba(168, 114, 8, 0.14);
}
[data-theme="light"] .modal-backdrop { background: rgba(40, 28, 0, 0.55); }
[data-theme="light"] .modal-card { background: var(--bg-0); }
[data-theme="light"] .theme-toggle {
    background: linear-gradient(135deg, rgba(168, 114, 8, 0.12), rgba(168, 114, 8, 0.04));
}
[data-theme="light"] .marquee { background: linear-gradient(90deg, rgba(168, 114, 8, 0.04), rgba(168, 114, 8, 0.10), rgba(168, 114, 8, 0.04)); }
[data-theme="light"] .footer-wordmark {
    background: linear-gradient(180deg, rgba(168, 114, 8, 0.22) 0%, transparent 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero-bg { opacity: .25; }
.paper-body {
    max-width: 760px; margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius); padding: 40px;
    box-shadow: var(--glass-shadow), var(--glass-inner);
}
.paper-body h3 {
    font-family: var(--font-display); font-size: 22px;
    color: var(--gold-1); margin: 24px 0 10px; letter-spacing: 1px;
}
.paper-body h3:first-child { margin-top: 0; }
.paper-body p { color: var(--ink-2); margin-bottom: 12px; }
.db-shell .db-main > #db-live {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/* ===================================================================================
   PIXAR LAYER — bigbull.biz landing page only
   -----------------------------------------------------------------------------------
   Everything here is scoped under `.pixar`,
a wrapper that exists only in
   bigbull/home.php. The member panel and the whitepaper share bigbull.css but not
   that wrapper,
so they are untouched.

   IMPORTANT: `.pixar` must never get transform / filter / backdrop-filter /
   perspective / contain — `.topnav` and `.side-rail` are position:fixed *inside* it,
and any of those properties would turn the wrapper into their containing block and
   break the sticky nav.

   The look: inflated rounded shapes,
thick soft drop shadows with a coloured "ground"
   edge,
glossy specular highlights,
candy palette,
and chunky outlined title type —
   the vocabulary of a 3D animated feature poster.
   =================================================================================== */
.pixar {
    /* ---- candy palette — warm, saturated, storybook -- */
    --px-cream:    #fff4e2;
    --px-cream-2:  #ffe9cd;
    --px-paper:    #fffaf2;
    --px-red:      #eda11c;
    --px-red-2:    #b3700a;
    --px-berry:    #6b4514;
    --px-orange:   #ff8a3d;
    --px-gold:     #ffc94a;
    --px-gold-2:   #f0a92b;
    --px-teal:     #2ec4b6;
    --px-teal-d:   #17857c;   /* highlight inside headings */
    --px-sky:      #4ea8de;
    --px-grape:    #6b4c93;

    --px-ink:      #3b2412;   /* body copy — warm brown, never pure black */
    --px-ink-2:    #6d5342;
    --px-ink-3:    #9c8067;

    --px-edge:     #fff;                      /* card / button rim            */
    --px-hi:       #fff;                      /* brightest face               */
    --px-gloss:    rgba(255, 255, 255, .75);  /* specular sweep across a card */
    --px-inset:    rgba(255, 255, 255, .9);   /* top inner highlight          */
    --px-btn-face: rgba(255, 255, 255, .45);
    --px-inlay:    rgba(255, 233, 205, .55);
    --px-shadow:   rgba(120, 62, 30, .22);
    --px-ground:   rgba(120, 62, 30, .16);   /* the solid "ground" edge under cards  */
    --px-radius:   30px;
    --px-radius-s: 20px;

    /* overshoot easing — the squash-and-stretch of every hover on this page */
    --px-bounce:   cubic-bezier(.34, 1.62, .64, 1);

    /* The pixar layer used to override these with a rounded storybook pair; it now
       inherits the site faces so the public pages and the member panel match. */
    --font-display: 'Epilogue', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    position: relative;
    background:
        radial-gradient(58% 40% at 12% 8%,  rgba(78, 168, 222, .16), transparent 62%),
        radial-gradient(52% 38% at 88% 26%, rgba(255, 138, 61,  .16), transparent 64%),
        radial-gradient(60% 42% at 50% 96%, rgba(46, 196, 182, .13), transparent 66%),
        linear-gradient(180deg, var(--px-cream) 0%, var(--px-paper) 42%, var(--px-cream-2) 100%);
    color: var(--px-ink);
    font-family: var(--font-body);
}
/* the techy grid + particle canvases fight the storybook look — drop them,
but only
   on the page that carries the wrapper */
body:has(.pixar) .grid-overlay,
body:has(.pixar) .particles { display: none !important; }
body:has(.pixar) { background: var(--px-cream, #fff4e2); }
body:has(.pixar) .scroll-progress {
    height: 5px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #ffc94a, #ff8a3d 45%, #eda11c);
    box-shadow: 0 2px 8px rgba(237, 161, 28, .5);
}
/* =========================== 1. TYPE ============================================= */
.pixar,
.pixar p,
.pixar li,
.pixar span,
.pixar div {
    font-family: var(--font-body);
}
.pixar h1,
.pixar h2,
.pixar h3,
.pixar h4,
.pixar .section-headline,
.pixar .rm-title,
.pixar .faq-q,
.pixar .tile-title,
.pixar .brand-name,
.pixar .footer-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--px-berry);
}
/* Poster-title treatment.
   This used to stack an 8-direction 2px cream ring around every glyph, plus a hard
   ground shadow and a 22px blur — a look built for Baloo 2, whose fat rounded strokes
   could carry a 2px outline without closing up. On the current display face the same
   ring bites into thinner stems and reads as a halo: the letters look furry rather
   than extruded. One soft drop keeps a hint of depth without touching the letterform.

   Kept on .vault-headline even though the vault section is gone, so the rule still
   applies if that class is reused. */
.pixar .section-headline,
.pixar .hero-headline,
.pixar .vault-headline,
.pixar .footer-wordmark {
    text-shadow: 0 3px 0 rgba(179, 112, 10, .16);
}
.pixar .section-headline {
    font-size: clamp(30px, 4.6vw, 58px);
    line-height: 1.04;
}
.pixar .section-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--px-orange);
    -webkit-text-fill-color: currentColor;
    background: none;
}
.pixar .rule {
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--px-gold), var(--px-orange), var(--px-red));
    box-shadow: 0 2px 0 rgba(179, 112, 10, .2);
}
.pixar p,
.pixar .small,
.pixar .m-item,
.pixar .tile-cap,
.pixar .trust-feature-body {
    color: var(--px-ink-2);
    line-height: 1.75;
}
.pixar .accent,
.pixar .big-num,
.pixar .counter,
.pixar .num,
.pixar .tile-stat,
.pixar .legend-val,
.pixar .big-countdown {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--px-red);
    -webkit-text-fill-color: currentColor;
    background: none;
    text-shadow: 0 3px 0 rgba(179, 112, 10, .18), 0 8px 14px rgba(120, 62, 30, .2);
}
.pixar .mono,
.pixar .tile-mono,
.pixar .brand-tag,
.pixar .lbl,
.pixar .tile-tag {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--px-ink-3);
}
.pixar a { color: var(--px-red); }
.pixar a:hover { color: var(--px-red-2); }
.pixar ::selection { background: var(--px-gold); color: var(--px-ink); }
/* =========================== 2. SURFACES ========================================= */
.pixar .glass,
.pixar .bento-tile,
.pixar .terminal,
.pixar .rm-card,
.pixar .faq-item,
.pixar .trust-feature,
.pixar .trust-row,
.pixar .trust-pill,
.pixar .modal-card,
.pixar .vault-visual,
.pixar .spec-grid > *,
.pixar .legend {
    background: var(--px-paper);
    border: 3px solid var(--px-edge);
    border-radius: var(--px-radius);
    box-shadow:
        0 10px 0 -2px var(--px-ground),          /* the solid ground edge */
        0 22px 40px -14px var(--px-shadow),      /* soft contact shadow   */
        inset 0 3px 0 var(--px-inset);   /* top specular highlight */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* glossy sweep across the top of every card */
.pixar .bento-tile,
.pixar .rm-card,
.pixar .trust-feature,
.pixar .terminal { position: relative; overflow: hidden; }
.pixar .bento-tile::after,
.pixar .rm-card::after,
.pixar .trust-feature::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--px-gloss), transparent);
}
.pixar .bento-tile:hover,
.pixar .rm-card:hover,
.pixar .trust-feature:hover {
    transform: translateY(-8px) scale(1.014);
    box-shadow:
        0 18px 0 -2px var(--px-ground),
        0 34px 54px -16px var(--px-shadow),
        inset 0 3px 0 var(--px-inset);
}
.pixar .bento-tile,
.pixar .rm-card,
.pixar .trust-feature {
    transition: transform .34s var(--px-bounce), box-shadow .34s var(--px-bounce);
}
/* tiles that carried a gold accent in the old theme get candy tints instead */
.pixar .section { position: relative; }
.pixar .tilt-3d { transform-style: flat; }
/* =========================== 3. BUTTONS ========================================== */
/* Chunky pills with a hard bottom edge that compresses on :active — the classic
   toy-button press. */
.pixar .btn,
.pixar .rm-btn,
.pixar .faq-toggle,
.pixar .theme-toggle {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .01em;
    border-radius: 999px;
    border: 3px solid var(--px-edge);
    transition: transform .2s var(--px-bounce), box-shadow .2s var(--px-bounce),
                background .2s ease, color .2s ease;
}
.pixar .btn-primary,
.pixar .nav-cta {
    background: linear-gradient(180deg, #ffc35c, var(--px-red) 55%, var(--px-red-2));
    color: #4a2e05;
    -webkit-text-fill-color: #4a2e05;
    box-shadow: 0 7px 0 var(--px-red-2), 0 16px 26px -10px rgba(179, 112, 10, .6);
}
.pixar .btn-primary:hover,
.pixar .nav-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 0 var(--px-red-2), 0 22px 34px -10px rgba(179, 112, 10, .65);
    color: #4a2e05;
}
.pixar .btn-primary:active,
.pixar .nav-cta:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--px-red-2), 0 6px 12px -6px rgba(179, 112, 10, .5);
}
.pixar .btn-ghost {
    background: var(--px-paper);
    color: var(--px-red);
    box-shadow: 0 7px 0 rgba(237, 161, 28, .28), 0 14px 24px -12px var(--px-shadow);
}
.pixar .btn-ghost:hover {
    background: var(--px-hi);
    color: var(--px-red-2);
    transform: translateY(-3px);
    box-shadow: 0 10px 0 rgba(237, 161, 28, .34), 0 20px 30px -12px var(--px-shadow);
}
.pixar .btn-ghost:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(237, 161, 28, .3); }
.pixar .btn-locked {
    background: linear-gradient(180deg, #ffd98a, var(--px-gold) 60%, var(--px-gold-2));
    color: #6b3f12;
    -webkit-text-fill-color: #6b3f12;
    box-shadow: 0 7px 0 #d18f16, 0 16px 26px -10px rgba(209, 143, 22, .55);
}
.pixar .btn-locked:hover { transform: translateY(-3px); box-shadow: 0 10px 0 #d18f16, 0 22px 32px -10px rgba(209, 143, 22, .6); }
.pixar .theme-toggle {
    background: var(--px-paper);
    color: var(--px-orange);
    box-shadow: 0 5px 0 rgba(237, 161, 28, .22);
}
.pixar .theme-toggle:hover { transform: rotate(16deg) scale(1.06); background: #fff; }
/* =========================== 4. CHIPS & PILLS ==================================== */
.pixar .chip,
.pixar .tile-tag,
.pixar .trust-tag,
.pixar .trust-pill,
.pixar .rm-status,
.pixar .faq-num,
.pixar .cd-label {
    font-family: var(--font-display);
    font-weight: 800;
    border-radius: 999px;
    border: 2.5px solid var(--px-edge);
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    color: var(--px-berry);
    box-shadow: 0 4px 0 rgba(120, 62, 30, .14), 0 8px 14px -8px var(--px-shadow);
    letter-spacing: .06em;
}
.pixar .chip .dot,
.pixar .status-dot,
.pixar .rm-dot {
    background: var(--px-teal);
    box-shadow: 0 0 0 4px rgba(46, 196, 182, .22);
    border-radius: 50%;
}
.pixar .dot.live,
.pixar .status-dot { background: var(--px-teal); }
.pixar .check { color: var(--px-teal); }
.pixar .danger { color: var(--px-red); }
.pixar .done { color: var(--px-teal); }
/* =========================== 5. NAV & RAIL ======================================= */
.pixar .topnav {
    background: linear-gradient(180deg, rgba(255, 250, 242, .96), rgba(255, 244, 226, .88));
    border-bottom: 3px solid var(--px-edge);
    box-shadow: 0 6px 22px -8px var(--px-shadow);
}
.pixar .brand-name { color: var(--px-berry); letter-spacing: 1.5px; }
.pixar .brand-logo {
    border: 3px solid var(--px-edge);
    box-shadow: 0 5px 0 rgba(120, 62, 30, .16), 0 10px 18px -8px var(--px-shadow);
}
.pixar .brand-tag { color: var(--px-ink-3); }
.pixar .topnav-status { color: var(--px-ink-2); }
.pixar .side-rail { color: var(--px-ink-3); }
.pixar .side-rail li { border-radius: 999px; }
.pixar .side-rail li:hover { color: var(--px-red); background: rgba(237, 161, 28, .08); }
.pixar .side-rail li.is-active { color: var(--px-red); font-weight: 800; }
.pixar .side-rail .rail-tick { background: var(--px-orange); border-radius: 999px; }
/* =========================== 6. DATA BITS ======================================== */
.pixar .bar,
.pixar .legend-bar {
    border-radius: 999px;
    background: rgba(120, 62, 30, .12);
    overflow: hidden;
}
.pixar .bar > *,
.pixar .legend-bar > * {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--px-gold), var(--px-orange), var(--px-red));
}
.pixar .legend-bullet { border-radius: 50%; box-shadow: 0 0 0 3px var(--px-edge); }
.pixar .donut,
.pixar .ring-chart { filter: drop-shadow(0 10px 16px rgba(120, 62, 30, .25)); }
/* terminal panels keep their shape but lose the hacker palette */
.pixar .terminal-bar {
    background: linear-gradient(180deg, var(--px-cream-2), #ffe0bd);
    border-bottom: 3px solid var(--px-edge);
}
.pixar .terminal-title { color: var(--px-ink-2); font-weight: 800; }
.pixar .terminal-body,
.pixar .t-prompt { color: var(--px-orange); }
.pixar .t-ok { color: var(--px-teal); }
.pixar .t-warn { color: var(--px-red); }
.pixar .tdot { border: 2px solid var(--px-edge); }
.pixar .t-red { background: #ffc35c; }
.pixar .t-amber { background: var(--px-gold); }
.pixar .t-green { background: var(--px-teal); }
/* =========================== 7. ROADMAP / FAQ / TRUST ============================ */
.pixar .rm-card-head,
.pixar .rm-card-foot { border-color: rgba(120, 62, 30, .14); }
.pixar .rm-phase { color: var(--px-orange); font-family: var(--font-display); font-weight: 800; }
.pixar .faq-item { margin-bottom: 14px; }
.pixar .faq-q { color: var(--px-berry); font-size: clamp(15px, 1.6vw, 19px); }
.pixar .faq-num { color: var(--px-orange); }
.pixar .faq-toggle {
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    color: var(--px-red);
    box-shadow: 0 4px 0 rgba(120, 62, 30, .16);
}
.pixar .trust-logo,
.pixar .pill-logo { filter: saturate(1.05); }
.pixar .trust-row-label,
.pixar .pill-text { color: var(--px-ink-2); font-weight: 700; }
.pixar .marquee-lane { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pixar .m-sep { background: rgba(120, 62, 30, .16); }
.pixar .strikethrough { color: var(--px-ink-3); text-decoration-color: var(--px-red); }
/* =========================== 8. VAULT / LOCK ===================================== */
.pixar .lock-orb {
    background: radial-gradient(circle at 34% 30%, #fff, var(--px-gold) 42%, var(--px-gold-2) 72%, #c98a12);
    box-shadow: 0 18px 0 -4px rgba(201, 138, 18, .35), 0 34px 50px -18px rgba(201, 138, 18, .6),
                inset 0 6px 12px rgba(255, 255, 255, .8);
}
.pixar .lock-rays { background: radial-gradient(circle, rgba(255, 201, 74, .35), transparent 68%); }
.pixar .lock-svg { color: var(--px-berry); filter: drop-shadow(0 6px 8px rgba(120, 62, 30, .35)); }
.pixar .lock-meta { color: var(--px-ink-2); }
.pixar .vault-checklist li { color: var(--px-ink-2); }
/* =========================== 9. MODAL ============================================ */
.pixar .modal-backdrop { background: rgba(59, 36, 18, .5); backdrop-filter: blur(4px); }
.pixar .modal-card { border-radius: 34px; }
.pixar .modal-code {
    background: var(--px-cream-2);
    border-radius: 14px;
    color: var(--px-berry);
    font-weight: 700;
}
.pixar .modal-lock { color: var(--px-gold-2); }
/* =========================== 10. FOOTER ========================================== */
.pixar .site-footer {
    background: linear-gradient(180deg, transparent, rgba(255, 233, 205, .9));
    border-top: 3px solid var(--px-edge);
    color: var(--px-ink-2);
}
.pixar .footer-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--px-berry);
}
.pixar .footer-meta,
.pixar .foot-cols a { color: var(--px-ink-2); }
.pixar .foot-cols a:hover { color: var(--px-red); }

/* =========================== 12. MOTION ========================================== */

@keyframes px-pop {
    0% { transform: scale(.94); opacity: 0; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.pixar .reveal.is-visible > .stagger-child { animation: px-pop .5s var(--px-bounce) both; }

@media (prefers-reduced-motion: reduce) {
.pixar *,
.pixar *::before,
.pixar *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================== 13. RESPONSIVE ====================================== */

@media (max-width: 720px) {
.pixar { --px-radius: 24px; --px-radius-s: 16px; }
.pixar .section-headline { text-shadow:
         1.5px 0 0 var(--px-paper), -1.5px 0 0 var(--px-paper),
         0 1.5px 0 var(--px-paper),  0 -1.5px 0 var(--px-paper),
         0 4px 0 rgba(179, 112, 10, .22),
         0 10px 16px rgba(120, 62, 30, .26); }
}
/* =========================== 14. PIXAR LAYER — CORRECTIONS ======================= */
/* .lock-orb is only a flex wrapper around .lock-svg in the base sheet — it has no
   shape of its own,
so the gold fill added above rendered as a rounded square.
   Round it into the coin it is meant to read as. */
.pixar .lock-orb { border-radius: 50%; }
/* .faq-item[open] .faq-toggle (0,
3,
0) outranks `.pixar .faq-toggle` (0,
2,
0) {
    background: linear-gradient(180deg, #ffc35c, var(--px-red));
    color: #4a2e05;
    box-shadow: 0 4px 0 var(--px-red-2);
}
/* The big contract-address readout inherited the muted mono colour and washed out
   against the tinted tile. */
.pixar .tile-mono { color: var(--px-berry); letter-spacing: -.5px; }
.pixar .mono,
.pixar .lbl { color: var(--px-ink-2); }
/* .spec-grid children sit *inside* a card already — the full card treatment gave
   every cell a second frame. Flatten them to tinted inlays. */
.pixar .spec-grid > * {
    background: var(--px-inlay);
    border: 2px solid var(--px-edge);
    border-radius: var(--px-radius-s);
    box-shadow: none;
    padding: 10px 14px;
}
.pixar .spec-grid em { color: var(--px-ink-3); font-family: var(--font-body); font-weight: 700; }
.pixar .spec-grid b { color: var(--px-berry); font-family: var(--font-display); font-weight: 800; }
.pixar .legend-label { color: var(--px-ink-2); font-weight: 700; }
/* =========================== 15. MOBILE OVERFLOW ================================ */
/* Defensive,
not a bug fix: grid and flex children default to `min-width: auto`,
which lets a replaced element's *intrinsic* width become its track's floor. The
   808px poster is the obvious candidate,
so the tracks are pinned to shrink.
   (Measured at a true 390px viewport,
scrollWidth == clientWidth — the only
   elements wider than the screen are the marquee runs,
which are meant to be.) */
.pixar .bento > *,
.pixar [class$="-grid"] > *,
.pixar .foot-cols > * { min-width: 0; }
.pixar img,
.pixar svg,
.pixar canvas { max-width: 100%; }

/* The nav is a five-column `auto 1fr auto auto auto` grid with no shrinkable
   track. It does still fit at 390px, but only just, and the hero already carries
   the buy CTA — so let it wrap and drop what the hero repeats. */
@media (max-width: 760px) {
.pixar .topnav-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
    }
.pixar .brand { margin-right: auto; }
.pixar .topnav-status,
.pixar .nav-cta { display: none; }
.pixar .btn-sm { padding: 9px 15px; font-size: 12.5px; }
.pixar .brand-logo { width: 34px; height: 34px; }
.pixar .brand-name { font-size: 17px; }
}
/* =========================== 16. PIXAR LAYER — NIGHT ============================= */
/* Keyed on :root:not([data-theme="light"]),
NOT [data-theme="dark"]. bigbull.js
   toggles dark by *removing* the attribute (`removeAttribute('data-theme')`) and the
   inline script in layout.php only ever sets it to "light" — so dark is the absence
   of the attribute and a [data-theme="dark"] selector never matches on this site.

   The ground is warm espresso,
not the plum it used to be. Plum put a cool magenta
   under a brand whose whole identity is a gold coin,
and the three coloured washes
   (blue,
orange,
teal) crossing it turned the page muddy. A near-black brown lets
   the gold read as metal,
and a single warm glow replaces the washes. */
:root:not([data-theme="light"]) .pixar {
    --px-cream:    #171210;   /* page ground   */
    --px-cream-2:  #120e0c;
    --px-paper:    #221a16;   /* card face     */

    --px-ink:      #f7efe4;
    --px-ink-2:    #d6c5b6;
    --px-ink-3:    #9d8b7c;
    --px-berry:    #f7e6cd;   /* headings: warm off-white, not peach */
    --px-red:      #f0b64a;   /* amber primary */
    --px-red-2:    #b8860f;

    --px-teal-d:   #4fd6c4;
    --px-edge:     #34281f;   /* warm rim, was cool plum */
    --px-hi:       #2a201a;
    --px-gloss:    rgba(255, 255, 255, .05);
    --px-inset:    rgba(255, 255, 255, .07);
    --px-btn-face: rgba(255, 255, 255, .05);
    --px-inlay:    rgba(255, 255, 255, .04);

    --px-shadow:   rgba(0, 0, 0, .62);
    --px-ground:   rgba(0, 0, 0, .5);
}
:root:not([data-theme="light"]) .pixar {
    background:
        radial-gradient(46% 32% at 50% 0%, rgba(240, 182, 74, .10), transparent 72%),
        linear-gradient(180deg, #171210 0%, #1e1714 48%, #141010 100%);
}
:root:not([data-theme="light"]) body:has(.pixar) { background: #171210; }
:root:not([data-theme="light"]) .pixar .topnav {
    background: linear-gradient(180deg, rgba(23, 18, 16, .96), rgba(18, 14, 12, .9));
}
:root:not([data-theme="light"]) .pixar .site-footer {
    background: linear-gradient(180deg, transparent, rgba(18, 14, 12, .9));
}
/* ===================================================================================
   17. SECTION REDESIGNS
   -----------------------------------------------------------------------------------
   New markup for all nine blocks lives in home.php under `px-*` class names. Every
   rule here is prefixed `.pixar ` so it lands at (0,
2,
0): enough to beat the base
   sheet's (0,
1,
0) rules and,
being later in the file,
to win ties against the earlier
   Pixar-layer rules that share a selector (e.g. `.pixar .hero-headline`).

   Colours come from the `--px-*` tokens declared in section 1 and re-declared for
   night in section 16,
so these sections theme themselves. Only the literal candy
   gradients need explicit night variants — collected at the end.
   =================================================================================== */
/* ------------------------------- 01 · HERO -------------------------------------
   Minimal pass. Everything decorative is gone — the pedestal,
the glow,
the two
   rotating rings,
the four badges and the five spec cards. What is left is the
   mark,
one kicker,
the headline,
one sentence,
one button with a text link
   beside it,
and a single hairline row of facts. The type treatment is unchanged
   so the hero still matches the section headings further down the page.
   -------------------------------------------------------------------------- */
/* Hero. Two columns: the pitch left, the live token panel right. The old centre
   stack ran ~870px tall around an 88px coin and carried no data; the split makes
   the fold work by pairing the claim with the numbers that back it. Collapses to
   one column at 900px, panel first, so a phone still leads with something real. */
.pixar .px-hero {
    position: relative;
    z-index: 3;
    padding: clamp(74px, 9vw, 118px) 20px clamp(46px, 6vw, 76px);
}
.pixar .px-hero-split {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(26px, 4vw, 58px);
    align-items: center;
}
.pixar .px-hero-copy { text-align: left; min-width: 0; }
.pixar .px-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: clamp(16px, 2vw, 22px);
    padding: 6px 13px;
    border-radius: 999px;
    border: 2px solid var(--px-edge);
    background: var(--px-inlay);
    font-family: var(--font-body);
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--px-ink-3);
}
.pixar .px-hero-badge i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--px-teal);
    animation: px-pulse 1.9s ease-in-out infinite;
}
.pixar .px-hero-title {
    margin: 0;
    text-transform: none;                 /* base .hero-headline forces uppercase */
    font-size: clamp(33px, 4.5vw, 60px);
    line-height: 1.02;
    letter-spacing: -.025em;
    color: var(--px-berry);
}
.pixar .px-hero-title .line { display: block; }
.pixar .px-hero-lede {
    max-width: 46ch;
    margin: clamp(16px, 2vw, 22px) 0 0;
    font-size: clamp(15px, 1.3vw, 16.5px);
    line-height: 1.65;
    color: var(--px-ink-2);
}
.pixar .px-hero-lede b { color: var(--px-ink); font-weight: 800; }
.pixar .px-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 20px;
    margin-top: clamp(24px, 3vw, 32px);
}

/* --- live token panel ---------------------------------------------------- */
.pixar .px-hero-panel {
    padding: clamp(20px, 2.4vw, 26px);
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -14px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-hp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pixar .px-hp-mark {
    width: 46px; height: 46px; border-radius: 50%;
    box-shadow: 0 4px 0 -1px var(--px-ground), 0 10px 16px -8px var(--px-shadow);
}
.pixar .px-hp-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pixar .px-hp-id b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--px-berry); }
.pixar .px-hp-id small { font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }
.pixar .px-hp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pixar .px-hp-usd {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(34px, 3.6vw, 46px); line-height: 1;
    letter-spacing: -.02em; color: var(--px-red);
    font-variant-numeric: tabular-nums;
}
.pixar .px-hp-chg {
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
    color: var(--px-ink-3); font-variant-numeric: tabular-nums;
}
.pixar .px-hp-chg.is-up   { color: var(--px-up); }
.pixar .px-hp-chg.is-down { color: var(--px-down); }
.pixar .px-hp-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
    margin: 18px 0 0;
}
.pixar .px-hp-grid > div {
    padding: 11px 13px;
    border-radius: 16px;
    border: 2px solid var(--px-edge);
    background: var(--px-inlay);
}
.pixar .px-hp-grid dt {
    font-family: var(--font-body);
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--px-ink-3); margin-bottom: 3px;
}
.pixar .px-hp-grid dd {
    margin: 0;
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
    color: var(--px-ink); font-variant-numeric: tabular-nums;
}
.pixar .px-hp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 13px;
    border-top: 2px dashed rgba(120, 62, 30, .16);
    font-size: 11.5px; font-weight: 700; color: var(--px-ink-3);
}

@media (max-width: 900px) {
    .pixar .px-hero-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .pixar .px-hero-copy { text-align: center; }
    .pixar .px-hero-lede { margin-left: auto; margin-right: auto; }
    .pixar .px-hero-cta { justify-content: center; }
}
.pixar .px-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; font-size: 14.5px; }
.pixar .px-textlink {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--px-amber-t);
    border-bottom: 2px solid rgba(168, 105, 10, .3);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}
.pixar .px-textlink:hover { color: var(--px-berry); border-color: currentColor; }
/* The live-activity feed was removed from the landing page; only its status
   dot survives, reused by the market card header. */
.pixar .px-live-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--px-teal);
    animation: px-pulse 1.9s ease-in-out infinite;
}
/* ------------------------------ 03 · RIBBON ------------------------------------ */
.pixar .px-ribbon { position: relative; z-index: 3; padding: 0; border: 0; background: none; }
.pixar .px-ribbon .marquee-lane + .marquee-lane { margin-top: 0; }
.pixar .px-ribbon-lane {
    padding: 15px 0;
    background: linear-gradient(180deg, #ffc35c, var(--px-red));
    border-top: 3px solid var(--px-edge);
    border-bottom: 3px solid var(--px-edge);
}
.pixar .px-ribbon .marquee-track {
    gap: 26px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(17px, 2.1vw, 25px);
    letter-spacing: 0;
    text-transform: none;
    color: #4a2e05;
}
.pixar .px-ribbon .m-item b { color: #fff; }
.pixar .px-ribbon .m-sep { color: rgba(255, 255, 255, .5); opacity: 1; }
.pixar .px-ribbon-thin { border-top: 0; background: linear-gradient(180deg, var(--px-gold), var(--px-gold-2)); }
.pixar .px-ribbon-thin .marquee-track {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #6b3f12;
}
.pixar .px-ribbon-thin .m-sep { color: rgba(107, 63, 18, .45); }
/* --------------------------- SHARED SECTION CHROME ----------------------------- */
.pixar .px-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pixar .px-eyebrow-num {
    padding: 6px 12px; border-radius: 999px;
    border: 2.5px solid var(--px-edge);
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    box-shadow: 0 3px 0 rgba(120, 62, 30, .14);
    font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--px-berry);
}
.pixar .px-eyebrow-line {
    height: 4px; width: clamp(38px, 7vw, 92px); border-radius: 999px;
    background: linear-gradient(90deg, var(--px-gold), var(--px-orange), var(--px-red));
}
.pixar .px-eyebrow-lbl {
    font-family: var(--font-display); font-weight: 800; font-size: 12px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--px-orange);
}
.pixar .px-eyebrow-lbl.is-danger { color: var(--px-red); }
.pixar .px-title {
    margin: 0 0 clamp(32px, 5vw, 54px);
    font-size: clamp(29px, 4.6vw, 58px);
    line-height: 1.05;
    color: var(--px-berry);
}
.pixar .px-title em { font-style: normal; color: var(--px-orange); }
.pixar .px-subhead {
    margin: clamp(46px, 6vw, 70px) 0 22px;
    text-align: center;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(18px, 2.2vw, 24px);
    color: var(--px-berry);
}
/* ----------------------------- 04 · MANIFESTO ---------------------------------- */
.pixar .px-laws { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.pixar .px-law {
    position: relative;
    overflow: hidden;
    padding: 30px 26px 26px;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -14px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
    transition: transform .34s var(--px-bounce), box-shadow .34s var(--px-bounce);
}
.pixar .px-law:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 0 -2px var(--px-ground), 0 34px 52px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-law-n {
    position: absolute; top: -18px; right: 4px;
    font-family: var(--font-display); font-weight: 800; font-size: 98px; line-height: 1;
    color: rgba(237, 161, 28, .10);
}
.pixar .px-law h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--px-berry); }
.pixar .px-law-stat {
    margin: 0 0 10px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(36px, 4.2vw, 52px); line-height: 1;
    color: var(--px-red);
    text-shadow: 0 3px 0 rgba(179, 112, 10, .18), 0 8px 14px rgba(120, 62, 30, .2);
}
.pixar .px-law-stat sup { font-size: .42em; vertical-align: super; margin-left: 2px; }
.pixar .px-slash { color: var(--px-gold-2); margin: 0 4px; }
.pixar .px-law-no { font-size: clamp(19px, 2.3vw, 27px); }
.pixar .px-law-no s { text-decoration-color: var(--px-red); text-decoration-thickness: 3px; }
.pixar .px-law-cap { margin: 0; font-size: 14px; line-height: 1.7; color: var(--px-ink-2); }
.pixar .px-law-code { margin: 12px 0 0; font-size: 11.5px; letter-spacing: .06em; font-weight: 700; color: var(--px-ink-3); }
.pixar .px-law:nth-child(1) { background: linear-gradient(160deg, #ddf3ff, var(--px-paper)); }
.pixar .px-law:nth-child(2) { background: linear-gradient(160deg, #e2fbf3, var(--px-paper)); }
.pixar .px-law:nth-child(3) { background: linear-gradient(160deg, #f0e6ff, var(--px-paper)); }
.pixar .px-law:nth-child(4) { background: linear-gradient(160deg, #fff0d9, var(--px-paper)); }
.pixar .px-contract {
    display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
    margin-top: 20px; padding: 20px 24px;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: linear-gradient(160deg, #fff3d6, var(--px-paper));
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -14px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-contract-sigil {
    width: 52px; height: 52px; border-radius: 50%;
    border: 3px solid var(--px-edge);
    box-shadow: 0 4px 0 rgba(120, 62, 30, .16);
}
.pixar .px-contract-text { flex: 1 1 260px; min-width: 0; }
.pixar .px-contract-text em {
    display: block; margin-bottom: 4px;
    font-style: normal; font-weight: 700; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--px-ink-3);
}
.pixar .px-addr {
    display: block; word-break: break-all;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(13px, 1.5vw, 17px); color: var(--px-berry);
}
.pixar .px-addr:hover { color: var(--px-red); }
.pixar .px-contract-cta { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--px-red); }
/* ------------------------------- 05 · VAULT ------------------------------------
   Redesign. Was a centred "door" panel with the countdown boxed into four cells,
followed by four boxed proof cards. Now a two-column read: one instrument panel
   on the left holding state + clock + facts,
and the argument on the right with the
   guarantees as a hairline list rather than four more cards. Fewer boxes,
same
   information.

   Note the mirror row uses [data-unlock-mirror] — the attribute bigbull.js actually
   writes to. The old markup used [data-countdown-text],
which nothing populated,
so
   that row read "--d --:--" permanently.
   -------------------------------------------------------------------------- */
.pixar .px-vault-grid {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.pixar .px-panel {
    padding: 26px 24px 22px;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 38px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-panel-state { display: flex; align-items: center; gap: 13px; }
.pixar .px-panel-lock {
    flex: 0 0 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #ffd98a, var(--px-gold) 60%, var(--px-gold-2));
    border: 3px solid var(--px-edge);
    box-shadow: 0 4px 0 rgba(209, 143, 22, .8);
    color: #7a4406;
}
.pixar .px-panel-lock svg { width: 22px; height: 22px; }
.pixar .px-panel-state-text b {
    display: block;
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
    color: var(--px-amber-t);
}
.pixar .px-panel-state-text small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--px-ink-3); }
/* The clock reads as one continuous time,
split by colons rather than boxed into
   four cards — the panel already is a card,
and nesting four more inside it was the
   thing making this block feel heavy. Numerals are tabular so the digits do not
   jitter as the seconds tick. */
.pixar .px-countdown {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(120, 62, 30, .16);
}
.pixar .px-cd-label {
    margin: 0 0 14px;
    text-align: center;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--px-ink-3);
}
.pixar .px-cd-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    border: 0;
}
.pixar .px-cd-row > div { position: relative; text-align: center; }
.pixar .px-cd-row > div + div::before {
    content: ":";
    position: absolute; left: 0; top: 1px;
    transform: translateX(-50%);
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(20px, 2.4vw, 27px); line-height: 1;
    color: var(--px-ink-3); opacity: .45;
}
.pixar .px-cd-row span {
    display: block;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(26px, 3.2vw, 36px); line-height: 1;
    color: var(--px-berry);
    font-variant-numeric: tabular-nums;
}
.pixar .px-cd-row em {
    display: block; margin-top: 6px;
    font-style: normal; font-weight: 700; font-size: 9.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--px-ink-3);
}
.pixar .px-panel-rows {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(120, 62, 30, .16);
    display: grid; gap: 10px;
}
.pixar .px-panel-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pixar .px-panel-rows dt { font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }
.pixar .px-panel-rows dd {
    margin: 0; text-align: right;
    font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
    color: var(--px-berry);
    font-variant-numeric: tabular-nums;
}
.pixar .px-vault-body p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.78; color: var(--px-ink-2); }
.pixar .px-vault-body b { color: var(--px-ink); font-weight: 800; }
.pixar .px-guarantees { list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0; }
.pixar .px-guarantees li {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 16px 0;
    border-top: 1px solid rgba(120, 62, 30, .16);
}
.pixar .px-guarantees li:last-child { border-bottom: 1px solid rgba(120, 62, 30, .16); }
.pixar .px-check {
    flex: 0 0 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--px-teal); color: #fff;
    font-weight: 800; font-size: 12px;
    box-shadow: 0 3px 0 #1f9c90;
}
.pixar .px-guarantees p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--px-ink-2); }
.pixar .px-guarantees b { color: var(--px-ink); font-weight: 800; }

@media (max-width: 820px) {
.pixar .px-vault-grid { grid-template-columns: 1fr; }
}
/* ------------------------------- 06 · TRUST ------------------------------------ */
.pixar .px-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.pixar .px-feat {
    position: relative;
    padding: 54px 26px 28px;
    text-align: center;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -14px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
    transition: transform .34s var(--px-bounce), box-shadow .34s var(--px-bounce);
}
.pixar .px-feat:hover { transform: translateY(-8px); }
.pixar .px-feat-badge {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center;
    border: 4px solid var(--px-edge);
    background: var(--px-hi);
    box-shadow: 0 6px 0 -1px var(--px-ground), 0 14px 22px -10px var(--px-shadow);
}
.pixar .px-feat-badge svg { width: 44px; height: 44px; }
.pixar .px-tag {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 138, 61, .16); color: var(--px-orange);
    font-family: var(--font-display); font-weight: 800;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.pixar .px-feat h3 { margin: 12px 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--px-berry); }
.pixar .px-feat p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--px-ink-2); }
.pixar .px-wallets { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; }
.pixar .px-wallet {
    padding: 24px 16px 20px;
    text-align: center;
    border-radius: 24px;
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 8px 0 -1px var(--px-ground), 0 18px 28px -16px var(--px-shadow);
    transition: transform .3s var(--px-bounce);
}
.pixar .px-wallet:hover { transform: translateY(-6px); }
.pixar .px-wallet-badge {
    width: 54px; height: 54px; margin: 0 auto 12px;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 5px 0 -1px var(--px-ground);
}
.pixar .px-wallet-badge svg { display: block; width: 100%; height: 100%; }
.pixar .px-wallet h4 { margin: 0 0 3px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--px-berry); }
.pixar .px-wallet small { font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }
/* ------------------------------ 07 · ROADMAP ----------------------------------- */
.pixar .px-road { list-style: none; position: relative; max-width: 880px; margin: 0 auto; padding: 0; }
.pixar .px-road::before {
    content: "";
    position: absolute; left: 27px; top: 12px; bottom: 12px; width: 4px;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(237, 161, 28, .32) 0 10px, transparent 10px 20px);
}
.pixar .px-road-step { position: relative; padding: 0 0 22px 74px; }
.pixar .px-road-node {
    position: absolute; left: 0; top: 4px;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 19px; font-weight: 800;
    border: 4px solid var(--px-edge);
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    color: var(--px-ink-3);
    box-shadow: 0 6px 0 -1px var(--px-ground), 0 12px 20px -10px var(--px-shadow);
}
.pixar .px-road-step.is-complete .px-road-node {
    background: linear-gradient(180deg, #5fe0cf, var(--px-teal)); color: #fff;
    box-shadow: 0 6px 0 #1f9c90, 0 12px 20px -10px rgba(31, 156, 144, .6);
}
.pixar .px-road-step.is-active .px-road-node {
    background: linear-gradient(180deg, #ffc35c, var(--px-red)); color: #fff;
    box-shadow: 0 6px 0 var(--px-red-2), 0 12px 20px -10px rgba(179, 112, 10, .6);
}
.pixar .px-road-card {
    padding: 22px 24px;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 8px 0 -1px var(--px-ground), 0 18px 30px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-road-step.is-locked .px-road-card { opacity: .72; }
.pixar .px-road-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pixar .px-road-phase { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--px-orange); }
.pixar .px-road-status {
    padding: 4px 11px; border-radius: 999px;
    border: 2px solid var(--px-edge); background: var(--px-inlay); color: var(--px-ink-3);
    font-family: var(--font-display); font-weight: 800;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.pixar .px-road-step.is-complete .px-road-status { color: #178a7e; background: rgba(46, 196, 182, .16); }
.pixar .px-road-step.is-active   .px-road-status { color: var(--px-red); background: rgba(237, 161, 28, .14); }
.pixar .px-road-card h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--px-berry); }
.pixar .px-road-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pixar .px-road-card li { font-size: 14px; line-height: 1.6; color: var(--px-ink-2); }
.pixar .px-road-card li::marker { color: var(--px-orange); }
/* -------------------------------- 08 · FAQ ------------------------------------- */
.pixar .px-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.pixar .px-faq-item {
    overflow: hidden;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 8px 0 -1px var(--px-ground), 0 18px 30px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-faq-item summary { display: flex; align-items: center; gap: 12px; padding: 20px 22px; cursor: pointer; list-style: none; }
.pixar .px-faq-item summary::-webkit-details-marker { display: none; }
.pixar .px-faq-n { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--px-orange); }
.pixar .px-faq-q { flex: 1; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.35; color: var(--px-berry); }
.pixar .px-faq-plus {
    position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(180deg, #ffc35c, var(--px-red));
    box-shadow: 0 3px 0 var(--px-red-2);
    transition: transform .28s var(--px-bounce);
}
.pixar .px-faq-plus::before,
.pixar .px-faq-plus::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    background: #4a2e05; border-radius: 2px; transform: translate(-50%, -50%);
}
.pixar .px-faq-plus::before { width: 13px; height: 3px; }
.pixar .px-faq-plus::after { width: 3px; height: 13px; }
.pixar .px-faq-item[open] .px-faq-plus { transform: rotate(135deg); }
.pixar .px-faq-a { padding: 0 22px 22px; }
.pixar .px-faq-a p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--px-ink-2); }
/* ------------------------------- 09 · FOOTER ----------------------------------- */
.pixar .px-footer { position: relative; z-index: 3; padding: 0 20px clamp(30px, 4vw, 52px); background: none; border: 0; }
.pixar .px-footer-cta {
    max-width: 900px;
    margin: 0 auto clamp(40px, 6vw, 72px);
    padding: clamp(34px, 5vw, 54px) 26px;
    text-align: center;
    border-radius: 36px;
    border: 3px solid var(--px-edge);
    background: linear-gradient(160deg, #fff3d6, var(--px-paper));
    box-shadow: 0 14px 0 -2px var(--px-ground), 0 30px 50px -18px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-footer-cta h2 {
    margin: 0 0 10px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(25px, 3.5vw, 42px); color: var(--px-berry);
}
.pixar .px-footer-cta p { margin: 0 auto 24px; max-width: 48ch; font-size: 15px; color: var(--px-ink-2); }
.pixar .px-footer-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pixar .px-footer-main {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 30px;
    padding-top: clamp(30px, 4vw, 44px);
    border-top: 2px dashed rgba(120, 62, 30, .2);
}
.pixar .px-footer-brand { display: flex; align-items: center; gap: 14px; }
.pixar .px-footer-brand small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--px-ink-3); }
.pixar .px-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 22px; }
.pixar .px-footer-cols h4 {
    margin: 0 0 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 12px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--px-orange);
}
.pixar .px-footer-cols a,
.pixar .px-footer-cols small { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; color: var(--px-ink-2); }
.pixar .px-footer-cols a:hover { color: var(--px-red); }
.pixar .px-footer-meta {
    max-width: 1180px; margin: clamp(28px, 4vw, 40px) auto 0;
    padding-top: 20px;
    border-top: 2px dashed rgba(120, 62, 30, .2);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--px-ink-3);
}

/* ------------------------------- MOTION ---------------------------------------- */

@keyframes px-pulse {
    0%,
    100% { box-shadow: 0 0 0 4px rgba(46, 196, 182, .26); }
    50% { box-shadow: 0 0 0 9px rgba(46, 196, 182, .05); }
}

/* ----------------------------- RESPONSIVE -------------------------------------- */

@media (max-width: 860px) {
.pixar .px-footer-main { grid-template-columns: 1fr; }
.pixar .px-road::before { left: 22px; }
.pixar .px-road-step { padding-left: 62px; }
.pixar .px-road-node { width: 46px; height: 46px; font-size: 17px; }
}
@media (max-width: 560px) {
.pixar .section { padding: 78px 18px; }
.pixar .px-specs li { min-width: 0; flex: 1 1 42%; padding: 11px 14px; }
.pixar .px-law-n { font-size: 74px; }
}
/* ------------------------- NIGHT: literal gradients ---------------------------- */
/* Everything else themes itself through the tokens; only the hard-coded candy
   gradients above need a dusk counterpart. */
:root:not([data-theme="light"]) .pixar .px-law:nth-child(1) { background: linear-gradient(160deg, rgba(79, 214, 196, .09), var(--px-paper)); }
:root:not([data-theme="light"]) .pixar .px-law:nth-child(2) { background: linear-gradient(160deg, rgba(240, 182, 74, .10), var(--px-paper)); }
:root:not([data-theme="light"]) .pixar .px-law:nth-child(3) { background: linear-gradient(160deg, rgba(120, 170, 230, .09), var(--px-paper)); }
:root:not([data-theme="light"]) .pixar .px-law:nth-child(4) { background: linear-gradient(160deg, rgba(230, 150, 80, .09), var(--px-paper)); }
:root:not([data-theme="light"]) .pixar .px-contract,
:root:not([data-theme="light"]) .pixar .px-footer-cta { background: linear-gradient(160deg, rgba(230, 150, 80, .09), var(--px-paper)); }
/* The ribbon kept its light-mode treatment at night: a full-bleed bright gold band
   across a dark plum page,
which reads as a hole punched in the layout rather than
   part of it. At night it becomes a deep bronze band with amber type instead — same
   shape and weight,
integrated with the ground it sits on. */
:root:not([data-theme="light"]) .pixar .px-ribbon-lane {
    background: linear-gradient(180deg, #3d2716, #2c1b0e);
    border-top-color: #4a3220;
    border-bottom-color: #4a3220;
}
:root:not([data-theme="light"]) .pixar .px-ribbon .marquee-track { color: #f7b23f; }
:root:not([data-theme="light"]) .pixar .px-ribbon .m-sep { color: rgba(247, 178, 63, .38); }
:root:not([data-theme="light"]) .pixar .px-ribbon-thin {
    background: linear-gradient(180deg, #2c1b0e, #241408);
    border-bottom-color: #4a3220;
}
:root:not([data-theme="light"]) .pixar .px-ribbon-thin .marquee-track { color: #c99a4e; }
:root:not([data-theme="light"]) .pixar .px-ribbon-thin .m-sep { color: rgba(201, 154, 78, .4); }
/* =========================== 18. NO-RED PALETTE — FOLLOW-UPS ===================== */
/* The layer above is now bronze (headings) / amber (actions) / teal (highlights),
with no red anywhere. Two things the literal swap could not fix on its own. */
/* 1. Headline highlights were orange,
which now sits too close to the amber
      actions. Teal gives the two-tone contrast the red used to provide,
and
      clears 4.5:1 on cream where a large amber would only reach ~2.6:1. */
.pixar .px-title em,
.pixar .px-hero-title em { color: var(--px-teal-d); }
/* 2. Law 04's three struck words rendered as one continuous rule,
because the
      line-through ran straight through the spaces between the <s> elements.
      inline-block ends each decoration at its own word. */
.pixar .px-law-no s {
    display: inline-block;
    margin-right: .34em;
    text-decoration-color: var(--px-amber-line, #b3700a);
    text-decoration-thickness: 3px;
}
.pixar .px-law-no { line-height: 1.35; }
/* =========================== 19. CONTRAST CORRECTIONS =========================== */
/* Amber and orange are bright hues: at full chroma they measure ~2.2:1 on the cream
   ground,
which is under the bar for small text (4.5:1) and even for large display
   type (3:1). The bright tones stay for fills,
rules and gradients — where contrast
   is not a legibility question — and text switches to the deepened pair below. */
.pixar {
    --px-orange-t: #b8650d;   /* small labels, eyebrows, tags   */
    --px-amber-t:  #a8690a;   /* display numerals, amounts      */
}
:root:not([data-theme="light"]) .pixar {
    --px-orange-t: #e6a75a;   /* on plum the deepened pair inverts */
    --px-amber-t:  #f0b64a;
}
/* small label text */
.pixar .px-eyebrow-lbl,
.pixar .px-road-phase,
.pixar .px-faq-n,
.pixar .px-footer-cols h4,
.pixar .px-tag,
.pixar .px-road-card li::marker { color: var(--px-orange-t); }
.pixar .px-tag { background: rgba(184, 101, 13, .13); }
/* display numerals and amounts */
.pixar .px-law-stat,
.pixar .px-contract-cta,
.pixar .px-specs b.is-sealed { color: var(--px-amber-t); }
.pixar .px-law-stat { text-shadow: 0 3px 0 rgba(168, 105, 10, .16), 0 8px 14px rgba(120, 62, 30, .18); }
.pixar .px-road-step.is-active .px-road-status { color: var(--px-orange-t); background: rgba(184, 101, 13, .14); }
/* the hero's hairline rule and dot separators are warm brown — on the plum ground
   they disappear,
so lift them for night */
:root:not([data-theme="light"]) .pixar .px-textlink { border-bottom-color: rgba(255, 195, 92, .35); }
/* vault hairlines are warm brown — lift them on the plum ground */
:root:not([data-theme="light"]) .pixar .px-countdown,
:root:not([data-theme="light"]) .pixar .px-panel-rows,
:root:not([data-theme="light"]) .pixar .px-guarantees li,
:root:not([data-theme="light"]) .pixar .px-guarantees li:last-child { border-color: rgba(255, 255, 255, .12); }
:root:not([data-theme="light"]) .pixar .px-cd-row > div + div::before { background: rgba(255, 255, 255, .12); }
/* The nav was a five-column `auto 1fr auto auto auto` grid whose flexible column
   was the PROTOCOL.STATUS block. With that block gone the 1fr landed on the theme
   toggle,
which floated it away from the other actions. Flex + an auto margin on
   the brand keeps the actions grouped right whatever the child count. */
.pixar .topnav-inner { display: flex; align-items: center; gap: 12px; }
.pixar .topnav-inner .brand { margin-right: auto; }

/* ===================================================================================
   20. AUTH PAGES — member login + register
   -----------------------------------------------------------------------------------
   Shared by app/Views/member/login.php and register.php. Both extend bigbull/layout,
   so this sheet is already on the page; both wrap their shell in .pixar, so every
   --px-* token below resolves and the pages theme themselves with the rest of the site.
   Kept here rather than inline in each view so the two cannot drift apart.
   =================================================================================== */

/* ===================================================================================
   MEMBER LOGIN — rebuilt on the landing page's theme.
   The wrapper carries `pixar`, so this page inherits the whole token set from
   bigbull.css (palette, fonts, radii, the espresso night ground) instead of
   re-declaring a second palette that would drift. Everything below is expressed in
   those --px-* tokens, so the page themes itself with the rest of the site.

   Gone: the fake terminal panel and the two-column marketing rail, matching the
   chrome we stripped from the landing page. The terminal carried #li-state and
   #li-ctr, which login.php's script writes to — so those ids live on a real meta
   list inside the card now. Removing them outright would have thrown on
   `stState.className = …` and killed the connect button.
   =================================================================================== */

.li-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- top bar ---- */
.li-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 12px;
    padding: 14px clamp(16px, 3vw, 30px);
    background: linear-gradient(180deg, var(--px-cream), rgba(255, 244, 226, .7));
    border-bottom: 2px solid var(--px-edge);
}
:root:not([data-theme="light"]) .li-topbar {
    background: linear-gradient(180deg, rgba(23, 18, 16, .96), rgba(18, 14, 12, .88));
}
.li-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.li-brand img {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--px-edge);
    box-shadow: 0 4px 0 -1px var(--px-ground);
}
.li-brand-name {
    font-family: var(--font-display); font-weight: 800;
    font-size: 18px; letter-spacing: 1.5px; color: var(--px-berry);
}
.li-brand-name .accent { color: var(--px-red); -webkit-text-fill-color: currentColor; background: none; }
.li-back {
    padding: 9px 16px; border-radius: 999px;
    border: 2.5px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 4px 0 -1px var(--px-ground);
    font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
    color: var(--px-ink-2); text-decoration: none;
    transition: transform .2s var(--px-bounce), color .2s ease;
}
.li-back:hover { transform: translateY(-2px); color: var(--px-red); }

/* ---- centred card ---- */
.li-main {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(26px, 4vw, 40px);
    padding: clamp(40px, 7vw, 80px) 20px clamp(46px, 6vw, 70px);
}
.li-card {
    width: 100%; max-width: 460px;
    padding: clamp(30px, 4vw, 42px) clamp(22px, 3.4vw, 36px) 30px;
    text-align: center;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 12px 0 -2px var(--px-ground), 0 26px 46px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.li-mark {
    width: 74px; height: 74px; border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 8px 0 -2px var(--px-ground), 0 16px 26px -12px var(--px-shadow);
}
.li-title {
    margin: 0 0 8px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(25px, 3.4vw, 32px); color: var(--px-berry);
}
.li-sub { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--px-ink-2); }

/* ---- step rail ---- */
.li-steps {
    list-style: none; margin: 0 0 26px; padding: 0;
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start;
}
.li-steps li { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.li-steps li em {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 14px;
    border: 3px solid var(--px-edge);
    background: var(--px-hi); color: var(--px-ink-3);
    box-shadow: 0 4px 0 -1px var(--px-ground);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.li-steps li span {
    font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--px-ink-3);
}
.li-steps li.is-active em {
    background: linear-gradient(180deg, #ffc35c, var(--px-red));
    color: #4a2e05; box-shadow: 0 4px 0 var(--px-red-2);
}
.li-steps li.is-active span { color: var(--px-amber-t); }
.li-steps li.is-done em { background: var(--px-teal); color: #fff; box-shadow: 0 4px 0 #1f9c90; }
.li-steps li.is-done span { color: var(--px-teal); }
.li-step-bar { height: 3px; border-radius: 999px; background: var(--px-edge); margin-top: 16px; min-width: 20px; }

/* ---- actions ---- */
.li-actions { display: flex; flex-direction: column; gap: 10px; }
.li-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 24px; border-radius: 999px;
    border: 3px solid var(--px-edge);
    font-family: var(--font-display); font-weight: 800; font-size: 14.5px;
    text-decoration: none; cursor: pointer;
    transition: transform .2s var(--px-bounce), box-shadow .2s var(--px-bounce);
}
.li-btn.primary {
    background: linear-gradient(180deg, #ffc35c, var(--px-red) 55%, var(--px-red-2));
    color: #4a2e05;
    box-shadow: 0 7px 0 var(--px-red-2), 0 16px 26px -10px rgba(179, 112, 10, .6);
}
.li-btn.primary:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 0 var(--px-red-2), 0 22px 32px -10px rgba(179, 112, 10, .6); }
.li-btn.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--px-red-2); }
.li-btn.primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.li-btn.ghost {
    background: var(--px-hi); color: var(--px-red);
    box-shadow: 0 6px 0 -1px var(--px-ground);
}
.li-btn.ghost:hover { transform: translateY(-3px); }
.li-btn .li-icon { width: 18px; height: 18px; }
.li-btn .li-spin {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(74, 46, 5, .3); border-top-color: #4a2e05;
    animation: li-spin .8s linear infinite;
}
.li-btn.ghost .li-spin { border-color: rgba(237, 161, 28, .3); border-top-color: var(--px-red); }
@keyframes li-spin { to { transform: rotate(360deg); } }

/* ---- status / address (both toggled inline by the page script) ---- */
.li-status {
    display: none; margin-top: 16px; padding: 12px 15px;
    border-radius: 16px; border: 2px solid var(--px-edge);
    font-size: 13.5px; line-height: 1.55; text-align: left;
}
.li-status.info  { background: rgba(237, 161, 28, .10); color: var(--px-amber-t); }
.li-status.warn  { background: rgba(240, 150, 30, .12); color: var(--px-orange-t); }
.li-status.ok    { background: rgba(46, 196, 182, .12); color: #17857c; }
.li-status.error { background: rgba(200, 90, 60, .12);  color: #b8562e; }
:root:not([data-theme="light"]) .li-status.ok    { color: #4fd6c4; }
:root:not([data-theme="light"]) .li-status.error { color: #ef9a76; }

.li-addr {
    display: none; margin-top: 12px; padding: 11px 14px;
    border-radius: 14px; border: 2px dashed var(--px-edge);
    background: var(--px-inlay);
    font-size: 12px; font-weight: 700; color: var(--px-amber-t);
    word-break: break-all; text-align: left;
}
.li-addr small {
    display: block; margin-bottom: 4px;
    font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--px-ink-3);
}

/* ---- session meta (carries #li-net, #li-ctr, #li-state) ---- */
.li-meta {
    margin: 24px 0 0; padding-top: 20px;
    border-top: 1px solid var(--px-edge);
    display: grid; gap: 9px; text-align: left;
}
.li-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.li-meta dt { font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }
.li-meta dd {
    margin: 0; text-align: right;
    font-family: var(--font-display); font-weight: 800; font-size: 13px;
    color: var(--px-berry);
}
.li-meta dd.warn  { color: var(--px-orange-t); }
.li-meta dd.ok    { color: var(--px-teal); }
.li-meta dd.error { color: #b8562e; }
:root:not([data-theme="light"]) .li-meta dd.error { color: #ef9a76; }
.li-pulse { animation: li-blink 1.4s infinite; }
@keyframes li-blink { 50% { opacity: .45; } }

/* ---- troubleshooting ---- */
.li-help { margin-top: 16px; text-align: left; font-size: 12.5px; line-height: 1.65; color: var(--px-ink-2); }
.li-help summary { cursor: pointer; outline: none; font-weight: 700; color: var(--px-ink-3); }
.li-help summary:hover { color: var(--px-red); }
.li-help-body { margin-top: 10px; padding-left: 12px; border-left: 2px dashed var(--px-edge); }
.li-help b { color: var(--px-berry); }
.li-help-reset {
    margin-top: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    border: 2.5px solid var(--px-edge); background: var(--px-hi);
    font-family: var(--font-display); font-weight: 800; font-size: 11.5px; color: var(--px-orange-t);
}
.li-help-reset:hover { color: var(--px-red); }

/* ---- wallets + footer ---- */
.li-wallets { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--px-edge); }
.li-wallets-label {
    display: block; margin-bottom: 12px;
    font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--px-ink-3);
}
.li-wallets-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.li-wallet {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    box-shadow: 0 4px 0 -1px var(--px-ground);
    transition: transform .2s var(--px-bounce);
}
.li-wallet:hover { transform: translateY(-3px); }
.li-wallet svg { display: block; width: 100%; height: 100%; }

.li-foot { margin: 20px 0 0; font-size: 13px; font-weight: 700; color: var(--px-ink-3); }
.li-foot a { color: var(--px-amber-t); text-decoration: none; border-bottom: 2px solid rgba(168, 105, 10, .3); }
.li-foot a:hover { color: var(--px-red); border-color: currentColor; }

@media (max-width: 480px) {
    .li-steps li span { display: none; }
    .li-steps li em { width: 30px; height: 30px; font-size: 13px; }
    .li-step-bar { margin-top: 14px; }
}

/* ---- shared fixes -------------------------------------------------------------
   The base sheet sets `img { display: block }`, so the card's `text-align: center`
   could never centre the mark — it needs an auto margin. */
.li-mark { display: block; margin: 0 auto 20px; }

/* Both views hide these boxes with `display:none` here and reveal them from script
   with `style.display = ''` — which clears the inline value and falls straight back
   to this rule, so they could never appear. Giving every kind class its own display
   makes the reveal work no matter which path sets it. */
.li-status.info,
.li-status.warn,
.li-status.ok,
.li-status.error { display: block; }

/* ---- register: intro + form ---------------------------------------------------- */

.li-connect-wrap p:empty { display: none; }
.li-connect-wrap p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--px-ink-2); }

.li-form { display: grid; gap: 20px; text-align: left; }
.li-field { display: grid; gap: 7px; }
.li-label {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--px-berry);
}
.li-label .hint { font-family: var(--font-body); font-weight: 700; font-size: 11px; color: var(--px-ink-3); }
.li-field-hint { font-size: 11.5px; line-height: 1.5; color: var(--px-ink-3); }

.li-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 3px solid var(--px-edge);
    background: var(--px-hi);
    color: var(--px-berry);
    font-family: var(--font-display); font-weight: 800; font-size: 15px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* The base sheet's `[data-theme="light"] .li-input::placeholder` is (0,2,1) and was
   outranking a bare `.li-input::placeholder` (0,1,1), painting the placeholder a dark
   olive. Matching its specificity (and sitting later in the file) takes it back — and
   the placeholder now reads as a hint rather than a value: body font, lighter weight,
   half opacity. */
.pixar .li-input::placeholder {
    color: var(--px-ink-3);
    opacity: .5;
    font-family: var(--font-body);
    font-weight: 600;
}
.li-input:focus { border-color: var(--px-red); box-shadow: 0 0 0 4px rgba(237, 161, 28, .18); }
.li-input.is-spon-ok  { border-color: var(--px-teal); box-shadow: 0 0 0 4px rgba(46, 196, 182, .16); }
.li-input.is-spon-bad { border-color: #d08a52; box-shadow: 0 0 0 4px rgba(208, 138, 82, .16); }

.li-input-wrap { position: relative; }
.li-input.has-suffix { padding-right: 108px; }
.li-input-suffix {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--px-ink-3);
}
.li-max {
    padding: 6px 11px; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--px-edge); background: var(--px-paper);
    font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
    letter-spacing: .1em; color: var(--px-amber-t);
    transition: color .2s ease, transform .2s var(--px-bounce);
}
.li-max:hover { color: var(--px-red); transform: translateY(-1px); }

/* ---- sponsor lookup (markup below .li-spon is injected by the page script) ------ */

.li-spon {
    display: none;
    margin-top: 4px; padding: 12px 14px;
    border-radius: 14px; border: 2px solid transparent;
    font-size: 12.5px; line-height: 1.5;
}
.li-spon.is-checking {
    display: flex; align-items: center; gap: 9px;
    background: var(--px-inlay); border-color: var(--px-edge); color: var(--px-ink-3);
}
.li-spon.is-ok   { display: block; background: rgba(46, 196, 182, .10); border-color: rgba(46, 196, 182, .38); color: var(--px-ink-2); }
.li-spon.is-bad  { display: flex; align-items: center; gap: 9px; background: rgba(208, 138, 82, .12); border-color: rgba(208, 138, 82, .4); color: #b8562e; }
:root:not([data-theme="light"]) .li-spon.is-bad { color: #ef9a76; }

.li-spon-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
    font-family: var(--font-display); font-weight: 800; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--px-teal);
}
.li-spon-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--px-teal); }
.li-spon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.li-spon-cell { padding: 9px 11px; border-radius: 11px; background: var(--px-inlay); border: 2px solid var(--px-edge); }
.li-spon-cell em {
    display: block; margin-bottom: 3px;
    font-style: normal; font-weight: 700; font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--px-ink-3);
}
.li-spon-cell b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--px-berry); }
.li-spon-spin {
    display: inline-block; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(237, 161, 28, .3); border-top-color: var(--px-red);
    animation: li-spin .8s linear infinite;
}

/* Login stacks one button; register shows Approve + Invest side by side. The script
   drops .single on the row once approval is no longer needed, so this has to be a
   grid — a flex column would ignore the class. */
.li-actions { display: grid; gap: 10px; grid-template-columns: 1fr; }
.li-form .li-actions { grid-template-columns: 1fr 1fr; }
.li-actions.single { grid-template-columns: 1fr; }

/* ---- register: figures + account ----------------------------------------------- */

.li-stats {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    width: 100%; max-width: 560px;
}
.li-stats li {
    padding: 16px 12px; text-align: center;
    border-radius: 20px; border: 3px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 6px 0 -1px var(--px-ground), 0 14px 24px -14px var(--px-shadow);
}
.li-stats b {
    display: block;
    font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2.6vw, 25px);
    color: var(--px-amber-t);
}
.li-stats small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--px-ink-3); }

.li-account {
    display: none;
    width: 100%; max-width: 560px;
    padding: 20px 22px;
    border-radius: var(--px-radius); border: 3px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 8px 0 -1px var(--px-ground), 0 18px 30px -16px var(--px-shadow);
}
.li-account-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-display); font-weight: 800; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--px-ink-3);
}
.li-account-head .ok { color: var(--px-teal); }
.li-account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.li-account-cell { padding: 12px 13px; border-radius: 14px; background: var(--px-inlay); border: 2px solid var(--px-edge); }
.li-account-cell em {
    display: block; margin-bottom: 4px;
    font-style: normal; font-weight: 700; font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--px-ink-3);
}
.li-account-cell b {
    display: block; word-break: break-word;
    font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--px-berry);
}
.li-account-cell small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--px-ink-3); }

@media (max-width: 560px) {
    .li-stats { grid-template-columns: 1fr; }
    .li-account-grid, .li-spon-grid { grid-template-columns: 1fr; }
    .li-actions { grid-template-columns: 1fr !important; }
}
.li-card.is-wide { max-width: 560px; }

/* ===================================================================================
   21. MEMBER MOBILE NAV + SCROLLBARS
   -----------------------------------------------------------------------------------
   Shared by every member page via the `member/_tabbar` partial. The partial brings its
   own `.pixar` wrapper, so the --px-* tokens resolve even on pages whose chrome has not
   been moved onto the theme yet; every value below still carries a literal fallback so
   nothing depends on that.
   =================================================================================== */

.db-mnav { background: none; }          /* .pixar would otherwise paint the wrapper */
.db-tabbar, .db-sheet { display: none; }

@media (max-width: 1000px) {
    /* The whole sidebar goes on mobile: its links are replaced by the tab bar and the
       wallet card is relocated into the sheet by the partial's script, so nothing is
       left in it. !important because the member pages each declare .db-nav / .db-side
       / .db-shell in an inline <style>, which loads after this file and would
       otherwise win on document order at equal specificity. */
    .db-nav { display: none !important; }
    .db-side { display: none !important; }
    .db-shell { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }

    /* the address already appears in the wallet card; in the top bar it only forces
       the row to wrap onto two lines */
    #db-addr-pill { display: none !important; }


    .db-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
        background: var(--px-paper, #fffaf2);
        border-top: 2px solid var(--px-edge, #e6d8c4);
        box-shadow: 0 -8px 24px -12px var(--px-shadow, rgba(120, 62, 30, .22));
    }
    .db-tabbar a, .db-tabbar button {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 7px 2px; border: 0; border-radius: 14px; cursor: pointer;
        background: transparent; text-decoration: none;
        font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 10.5px;
        color: var(--px-ink-3, #9c8067);
    }
    .db-tabbar svg { width: 21px; height: 21px; }
    .db-tabbar a.is-active { background: var(--px-inlay, rgba(255, 233, 205, .55)); color: var(--px-amber-t, #a8690a); }
    .db-tabbar a:active, .db-tabbar button:active { transform: scale(.94); }

    .db-sheet { display: block; position: fixed; inset: 0; z-index: 70; }
    .db-sheet[hidden] { display: none; }
    .db-sheet-backdrop { position: absolute; inset: 0; background: rgba(59, 36, 18, .5); }
    .db-sheet-panel {
        position: absolute; left: 0; right: 0; bottom: 0;
        padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
        border-radius: 26px 26px 0 0;
        border-top: 3px solid var(--px-edge, #e6d8c4);
        background: var(--px-paper, #fffaf2);
        box-shadow: 0 -14px 40px -16px var(--px-shadow, rgba(120, 62, 30, .22));
        animation: db-sheet-up .26s cubic-bezier(.34, 1.62, .64, 1);
    }
    @keyframes db-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .db-sheet-grip { width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: var(--px-edge, #e6d8c4); }
    .db-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .db-sheet-head h3 { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 16px; color: var(--px-berry, #6b4514); }
    .db-sheet-head button {
        width: 32px; height: 32px; border-radius: 50%; cursor: pointer; line-height: 1;
        border: 2px solid var(--px-edge, #e6d8c4); background: var(--px-hi, #fff);
        color: var(--px-ink-2, #6d5342); font-size: 19px;
    }
    .db-sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .db-sheet-grid a {
        padding: 14px 15px; border-radius: 15px; text-decoration: none;
        border: 2.5px solid var(--px-edge, #e6d8c4); background: var(--px-inlay, rgba(255, 233, 205, .55));
        font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 13.5px;
        color: var(--px-ink-2, #6d5342);
    }
    .db-sheet-grid a.is-active {
        background: var(--px-paper, #fffaf2);
        color: var(--px-amber-t, #a8690a);
        border-color: var(--px-amber-t, #a8690a);
    }

    /* wallet card, once the script has moved it in here */
    .db-sheet-wallet { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--px-edge, #e6d8c4); }
    .db-sheet-wallet h4 {
        margin: 0 0 10px;
        font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 11px;
        letter-spacing: .18em; text-transform: uppercase; color: var(--px-ink-3, #9c8067);
    }
    .db-sheet-wallet .db-wallet { box-shadow: none; }

    /* the support FAB is fixed bottom-right and lands on top of the "More" tab */
    #bbchat-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
    body:has(.db-sheet:not([hidden])) #bbchat-fab { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .db-sheet-panel { animation: none; }
}

/* ---- scrollbars ----------------------------------------------------------------
   Hidden on every scrolling pane. The content column is its own scroll container, so
   it rendered an OS scrollbar down the middle of the layout; the panes still scroll by
   wheel, trackpad, touch and keyboard, there is just no visible track. */
.db-main, .db-side, .db-sheet-panel, #bbchat-msgs {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
}
.db-main::-webkit-scrollbar,
.db-side::-webkit-scrollbar,
.db-sheet-panel::-webkit-scrollbar,
#bbchat-msgs::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===================================================================================
   22. MEMBER CHROME — top bar, shell, sidebar, blocking states, app-shell scrolling
   -----------------------------------------------------------------------------------
   Shared by the member pages moved onto the theme. Selectors are scoped under `.pixar`,
   which those pages carry on their shell wrapper, so pages still on inline chrome
   (salary, performance, directs, downline) match none of this.
   =================================================================================== */

/* ---- top bar ---- */
/* The bar itself stays full-bleed so its background reaches the window edges;
   only its contents are constrained, to the same 1360px the shell below uses —
   otherwise the brand and the pills drift far away from the columns they head. */
.pixar .db-topbar {
    position: sticky; top: 0; z-index: 50;
    padding: 13px clamp(14px, 2.4vw, 26px);
    background: linear-gradient(180deg, var(--px-cream), rgba(255, 244, 226, .72));
    border-bottom: 2px solid var(--px-edge);
}
:root:not([data-theme="light"]) .db-topbar {
    background: linear-gradient(180deg, rgba(23, 18, 16, .96), rgba(18, 14, 12, .88));
}
.pixar .db-topbar-inner {
    display: flex; align-items: center; gap: 10px;
    max-width: 1360px; margin: 0 auto;
}
.pixar .db-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.pixar .db-brand img { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--px-edge); box-shadow: 0 4px 0 -1px var(--px-ground); }
.pixar .db-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 1.4px; color: var(--px-berry); }
.pixar .db-brand-name .accent { color: var(--px-red); -webkit-text-fill-color: currentColor; background: none; }
.pixar .db-topbar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pixar .db-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    border: 2.5px solid var(--px-edge); background: var(--px-paper);
    font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
    color: var(--px-ink-2);
}
.pixar .db-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--px-teal); }
.pixar .db-pill .dot.warn { background: var(--px-gold-2); }
.pixar .db-pill .dot.err { background: #c8703c; }
.pixar .db-pill.addr { color: var(--px-amber-t); }
.pixar .db-back {
    padding: 8px 15px; border-radius: 999px;
    border: 2.5px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 4px 0 -1px var(--px-ground);
    font-family: var(--font-display); font-weight: 800; font-size: 12px;
    color: var(--px-ink-2); text-decoration: none;
    transition: transform .2s var(--px-bounce), color .2s ease;
}
.pixar .db-back:hover { transform: translateY(-2px); color: var(--px-red); }
/* ---- shell ---- */
.pixar .db-shell {
    display: grid; grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(16px, 2.2vw, 26px);
    max-width: 1360px; margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(14px, 2.4vw, 26px) 60px;
}
.pixar .db-side { position: sticky; top: 78px; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.pixar .db-side-label {
    font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--px-ink-3);
    padding: 0 4px;
}
.pixar .db-nav { display: flex; flex-direction: column; gap: 3px; }
.pixar .db-nav a {
    padding: 9px 14px; border-radius: 12px;
    font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
    color: var(--px-ink-2); text-decoration: none;
    border: 2.5px solid transparent;
    transition: background .18s ease, color .18s ease, transform .18s var(--px-bounce);
}
.pixar .db-nav a:hover { background: var(--px-inlay); color: var(--px-red); transform: translateX(2px); }
.pixar .db-nav a.is-active {
    background: var(--px-paper); border-color: var(--px-edge);
    box-shadow: 0 4px 0 -1px var(--px-ground);
    color: var(--px-amber-t);
}
.pixar .db-wallet {
    padding: 14px 15px; border-radius: 18px;
    border: 3px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 6px 0 -1px var(--px-ground);
}
.pixar .db-wallet-addr { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--px-berry); word-break: break-all; }
.pixar .db-wallet-net { margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--px-ink-3); }
.pixar .db-wallet-actions { display: flex; gap: 7px; margin-top: 11px; }
.pixar .db-wallet-btn {
    flex: 1; padding: 7px 10px; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--px-edge); background: var(--px-hi);
    font-family: var(--font-display); font-weight: 800; font-size: 11px;
    color: var(--px-ink-2);
    transition: color .18s ease, transform .18s var(--px-bounce);
}
.pixar .db-wallet-btn:hover { color: var(--px-red); transform: translateY(-1px); }
.pixar .db-wallet-btn.danger:hover { color: #c8703c; }
/* ---- main + blocking states ---- */
.pixar .db-main { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 24px); min-width: 0; }
.pixar .db-state {
    display: none;
    padding: clamp(30px, 4vw, 46px) 26px;
    text-align: center;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .db-state.is-shown { display: block; }
.pixar .db-state-ico {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 26px;
    border: 3px solid var(--px-edge);
    background: linear-gradient(180deg, #ffd98a, var(--px-gold) 60%, var(--px-gold-2));
    color: #7a4406;
    box-shadow: 0 6px 0 rgba(209, 143, 22, .8);
}
.pixar .db-state-ico.err { background: linear-gradient(180deg, #e8a077, #c8703c); color: #fff; box-shadow: 0 6px 0 #9c5228; }
.pixar .db-state h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 26px); color: var(--px-berry); }
.pixar .db-state p { margin: 0 auto 22px; max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--px-ink-2); }
.pixar .db-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pixar .db-cta,
.pixar .db-claim-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 999px; cursor: pointer; text-decoration: none;
    border: 3px solid var(--px-edge);
    background: linear-gradient(180deg, #ffc35c, var(--px-red) 55%, var(--px-red-2));
    color: #4a2e05;
    box-shadow: 0 6px 0 var(--px-red-2), 0 14px 24px -10px rgba(179, 112, 10, .55);
    font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
    transition: transform .2s var(--px-bounce), box-shadow .2s var(--px-bounce);
}
.pixar .db-cta:hover,
.pixar .db-claim-cta:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--px-red-2), 0 20px 30px -10px rgba(179, 112, 10, .6); color: #4a2e05; }
.pixar .db-cta:active,
.pixar .db-claim-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--px-red-2); }
.pixar .db-cta.ghost { background: var(--px-hi); color: var(--px-red); box-shadow: 0 6px 0 -1px var(--px-ground); }
/* Anchors: reclaim colour from the generic link rule. `.pixar a` is a class plus a
   type selector, so it outranks a bare `.db-cta` / `.db-claim-cta` / `.db-back`
   rule and painted the claim button's label amber on an amber fill — an invisible
   CTA. Scoping these with `.pixar` puts them a step above it. */
.pixar .db-back { color: var(--px-ink-2); }
.pixar .db-back:hover { color: var(--px-red); }
.pixar .db-cta,
.pixar .db-claim-cta,
.pixar .db-cta:hover,
.pixar .db-claim-cta:hover { color: #4a2e05; }
.pixar .db-cta.ghost,
.pixar .db-cta.ghost:hover { color: var(--px-red); }

/* ---- app shell: only the content column scrolls -------------------------------
   `position: sticky` never worked here: bigbull.css puts `overflow-x: hidden` on
   html and body, which makes body a scroll container, so the sticky topbar/sidebar
   had no scrolling ancestor to stick to and simply scrolled away with the page.
   Rather than unpick that site-wide rule, the dashboard becomes a real app shell —
   the page itself does not scroll, the main column does.

   Desktop only. On narrow screens the sidebar collapses to a row above the content
   and a 100vh shell fights mobile browser chrome, so the page scrolls normally. */
@media (min-width: 1001px) {
/* Body is the shell, not .db-page. member.js injects a fixed admin-view banner
       and compensates with `body.style.paddingTop`; if .db-page were the 100vh box
       it would sit *below* that padding and overflow the viewport by exactly the
       banner's height. Measuring body instead — with border-box so the padding
       counts inside 100vh — absorbs a banner of any height. */
body:has(.db-page) {
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
.db-page {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
.pixar .db-topbar { position: static; flex: 0 0 auto; }
.pixar .db-shell {
        flex: 1 1 auto;
        min-height: 0;              /* lets the grid shrink so children can scroll */
        overflow: hidden;
        padding-bottom: 0;
        /* `margin: 0 auto` (for the max-width centring) beats `align-items: stretch`
           on a flex item, which collapsed the shell to its content width. An explicit
           width restores the fill; max-width still caps and the auto margins centre. */
        width: 100%;
    }
.pixar .db-side {
        position: static;
        max-height: 100%;
        overflow-y: auto;
        padding-bottom: 24px;
    }
.pixar .db-main {
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 40px;
    }
}
/* the reading-progress bar tracks window scroll, which no longer moves here */
body:has(.db-page) .scroll-progress { display: none; }
/* The chain pill is a status light, not a label: it reports "wrong network",
   "no wallet" and "system offline" as well as the chain name. Hiding it outright
   would lose those warnings, so it only shows when the dot is in a warn/err state —
   which means the plain "BNB Smart Chain" reading never appears. */
#db-net-pill { display: none; }
#db-net-pill:has(.dot.warn),
#db-net-pill:has(.dot.err) { display: inline-flex; }
/* member.js builds the admin banner with inline styles (old gold-on-dark) and it
   lives outside .pixar, so it cannot see the --px-* tokens — literals + !important
   are the only way to bring it onto the theme. */
#bb-view-banner {
    background: linear-gradient(180deg, #ffc35c, #eda11c) !important;
    color: #4a2e05 !important;
    font-family: 'Epilogue', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: .08em !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(120, 62, 30, .28) !important;
}
#bb-view-exit {
    border-radius: 999px !important;
    border: 2px solid rgba(74, 46, 5, .4) !important;
    background: rgba(255, 255, 255, .45) !important;
    color: #4a2e05 !important;
}

/* The shell collapses to a single column below 1000px. This lives in the shared
   sheet, not in a page: withdraw inherited section 22's two-column grid without it
   and stayed side-by-side on phones, pushing the content column off-screen. */
@media (max-width: 1000px) {
    .pixar .db-shell { grid-template-columns: 1fr; }
    .pixar .db-side { position: static; }
}

/* Each page wraps its loaded content in a single `#<prefix>-live` div, so .db-main's
   flex gap only ever sees one child and the sections inside it sat flush against each
   other. Give the wrapper the same column gap. The attribute selector covers
   #db-live, #wd-live and any future page without needing a shared class.
   Both pages reveal it with `style.display = ''`, which falls back to this rule;
   hiding still works because the inline `display:none` outranks it. */
.pixar .db-main > div[id$="-live"] {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.2vw, 24px);
}

/* Mobile top bar fits on one line. This has to sit AFTER section 22 — the chrome
   there sets .db-back's padding/size at the same specificity, so an earlier rule
   (section 21) lost on document order and the row kept wrapping once a page used a
   longer label ("← Dashboard" rather than "← Site"). */
@media (max-width: 1000px) {
    .pixar .db-topbar { padding-left: 12px; padding-right: 12px; }
    .pixar .db-back { padding: 6px 10px; font-size: 10.5px; }
    .pixar .db-brand-name { font-size: 15px; }
    .pixar .db-brand img { width: 30px; height: 30px; }
    .pixar .db-pill { padding: 6px 10px; font-size: 10.5px; }
}

/* ===================================================================================
   23. MEMBER CONTENT KIT
   -----------------------------------------------------------------------------------
   The dashboard's content primitives, promoted so every member page renders the same
   hero, stat cards and section cards instead of each one inventing its own. Pages keep
   their prefixed classes only for genuinely page-specific parts (a form, a ladder).
   Written by hand and scoped `.pixar` — do not regex-scope this file.
   =================================================================================== */

/* ---- hero ---- */
.pixar .db-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: clamp(16px, 2.4vw, 28px); align-items: center;
    padding: clamp(22px, 3vw, 30px);
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: linear-gradient(180deg, rgba(240, 182, 74, .13), var(--px-paper));
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .db-eyebrow {
    display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--px-ink-3);
}
.pixar .db-eyebrow .live {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    background: rgba(46, 196, 182, .16); color: #17857c;
    font-size: 10px; letter-spacing: .14em;
}
.pixar .db-eyebrow .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
:root:not([data-theme="light"]) .pixar .db-eyebrow .live { color: #4fd6c4; }

.pixar .db-greeting {
    margin: 0;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(24px, 3.2vw, 36px); line-height: 1.08; color: var(--px-berry);
}
.pixar .db-greeting .accent { color: var(--px-teal-d); -webkit-text-fill-color: currentColor; background: none; }

.pixar .db-claim { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; min-width: 0; }
.pixar .db-claim-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--px-ink-3); }
.pixar .db-claim-value {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(28px, 4vw, 42px); line-height: 1; color: var(--px-amber-t);
    font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere;
}
.pixar .db-claim-value small { font-size: .34em; color: var(--px-ink-3); }

/* ---- stat cards ---- */
.pixar .db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 12px; }
.pixar .db-stat {
    padding: 17px 18px; border-radius: 20px;
    border: 3px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 6px 0 -1px var(--px-ground), 0 14px 26px -16px var(--px-shadow);
    transition: transform .28s var(--px-bounce);
}
.pixar .db-stat:hover { transform: translateY(-4px); }
.pixar .db-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.pixar .db-stat-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--px-ink-3); }
.pixar .db-stat-value {
    display: flex; align-items: baseline; gap: 5px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(19px, 2.1vw, 24px); line-height: 1.15; color: var(--px-berry);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere;   /* six-decimal amounts */
}
.pixar .db-stat-value small { font-size: .5em; color: var(--px-ink-3); }
.pixar .db-stat-sub { margin-top: 7px; font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }
.pixar .db-stat.is-loading .db-stat-value { color: var(--px-ink-3); opacity: .45; }
.pixar .db-stream { transition: color .3s ease, transform .3s ease; }
.pixar .db-stream.is-fresh { color: var(--px-amber-t); transform: scale(1.04); }

/* ---- section card ---- */
.pixar .db-card,
.pixar .db-ref, .pixar .db-booster, .pixar .db-levels, .pixar .db-strip-card {
    padding: clamp(18px, 2.4vw, 24px);
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge); background: var(--px-paper);
    box-shadow: 0 8px 0 -1px var(--px-ground), 0 18px 32px -18px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .db-card-head,
.pixar .db-ref-head, .pixar .db-booster-head, .pixar .db-levels-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.pixar .db-card-head h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--px-berry); }
.pixar .db-card-head .tag {
    padding: 5px 12px; border-radius: 999px;
    border: 2px solid var(--px-edge); background: var(--px-inlay);
    font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
    letter-spacing: .1em; color: var(--px-ink-3);
}

@media (max-width: 900px) {
    .pixar .db-hero { grid-template-columns: 1fr; }
    .pixar .db-claim { align-items: flex-start; text-align: left; }
    .pixar .db-claim-value { justify-content: flex-start; }
}
@media (max-width: 1000px) {
    .pixar .db-stat-value  { font-size: 27px; }
    .pixar .db-claim-value { font-size: 36px; }
    .pixar .db-stat-label  { font-size: 12.5px; }
    .pixar .db-claim-label { font-size: 11.5px; }
}

/* ---- referral row (dashboard + directs) ---- */
.pixar .db-ref-row { display: flex; gap: 9px; flex-wrap: wrap; }
.pixar .db-ref-input {
    flex: 1 1 240px; min-width: 0;
    padding: 12px 15px; border-radius: 14px;
    border: 3px solid var(--px-edge); background: var(--px-hi);
    color: var(--px-ink-2);
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    outline: none;
}
.pixar .db-ref-btn {
    padding: 12px 20px; border-radius: 999px; cursor: pointer;
    border: 3px solid var(--px-edge);
    background: linear-gradient(180deg, #ffc35c, var(--px-red) 55%, var(--px-red-2));
    color: #4a2e05;
    box-shadow: 0 5px 0 var(--px-red-2);
    font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
    transition: transform .2s var(--px-bounce);
}
.pixar .db-ref-btn:hover { transform: translateY(-2px); }
.pixar .db-ref-btn.ghost { background: var(--px-hi); color: var(--px-red); box-shadow: 0 5px 0 -1px var(--px-ground); }
.pixar .db-ref-btn.copied { background: linear-gradient(180deg, #5fe0cf, var(--px-teal)); color: #06301f; box-shadow: 0 5px 0 #1f9c90; }

/* =========================== 17. PIXAR LAYER — MARKET CARD ======================= */
/* The $BBD/USDT stats panel between the hero and the live feed. Shares the card
   shell of .px-chart-card (same rim, ground edge and inset highlight) so the two
   read as one pair of panels rather than two unrelated widgets.

   Every colour resolves through the --px-* tokens, so the night theme block at
   section 16 recolours this card for free; the only additions here are the two
   directional colours — up/down and buy/sell — which are deliberately NOT the
   brand gold, because gold on this page means "the token", not "the trend". */
.pixar {
    --px-up:   #2e9e5b;
    --px-down: #d2483f;
}
:root:not([data-theme="light"]) .pixar {
    --px-up:   #52d18a;
    --px-down: #f2685c;
}

.pixar .px-mkt { position: relative; z-index: 3; padding: 0 20px clamp(28px, 4vw, 46px); }
.pixar .px-mkt-card {
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -14px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-mkt-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 18px 24px;
    background: linear-gradient(180deg, var(--px-cream-2), transparent);
    border-bottom: 2px dashed rgba(120, 62, 30, .16);
}
.pixar .px-mkt-head h2 {
    margin: 0;
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
    color: var(--px-berry);
}
.pixar .px-mkt-sub { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--px-ink-3); }
.pixar .px-mkt-body { padding: 16px 14px 6px; }

/* --- stat grids ------------------------------------------------------------- */
.pixar .px-mkt-row { display: grid; gap: 10px; margin-bottom: 10px; }
.pixar .px-mkt-row-1 { grid-template-columns: 1fr; }
.pixar .px-mkt-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pixar .px-mkt-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pixar .px-mkt-cell {
    display: flex; flex-direction: column; gap: 5px;
    padding: 13px 15px;
    border-radius: var(--px-radius-s);
    border: 2px solid var(--px-edge);
    background: var(--px-inlay);
}
.pixar .px-mkt-cell-end { align-items: flex-end; text-align: right; }
.pixar .px-mkt-k {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--px-ink-3);
}
.pixar .px-mkt-v {
    font-family: var(--font-display); font-weight: 800; font-size: 19px;
    line-height: 1.15; color: var(--px-ink);
    font-variant-numeric: tabular-nums;
}
.pixar .px-mkt-v-xl { font-size: clamp(24px, 3.4vw, 32px); color: var(--px-red); }
.pixar .px-mkt-hero { background: linear-gradient(180deg, var(--px-hi), var(--px-inlay)); }
.pixar .px-mkt-v.is-buy  { color: var(--px-up); }
.pixar .px-mkt-v.is-sell { color: var(--px-down); }

/* --- timeframe tabs --------------------------------------------------------- */
.pixar .px-mkt-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin: 14px 0 12px;
}
.pixar .px-mkt-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 6px;
    cursor: pointer;
    border-radius: 14px;
    border: 2px solid var(--px-edge);
    background: var(--px-inlay);
    font-family: inherit;
    transition: transform .18s var(--px-bounce), background .18s ease, border-color .18s ease;
}
.pixar .px-mkt-tab:hover { transform: translateY(-2px); }
.pixar .px-mkt-tab.is-on {
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    border-color: var(--px-red);
    box-shadow: 0 3px 0 rgba(120, 62, 30, .14);
}
.pixar .px-mkt-tab-lbl {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
    color: var(--px-ink-3);
}
.pixar .px-mkt-tab.is-on .px-mkt-tab-lbl { color: var(--px-berry); }
.pixar .px-mkt-tab-chg {
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
    color: var(--px-ink-2); font-variant-numeric: tabular-nums;
}
.pixar .px-mkt-tab-chg.is-up   { color: var(--px-up); }
.pixar .px-mkt-tab-chg.is-down { color: var(--px-down); }

/* --- buy / sell share bar --------------------------------------------------- */
.pixar .px-mkt-bar {
    display: flex; gap: 3px; height: 7px; margin: 2px 2px 12px;
    border-radius: 999px; overflow: hidden;
}
.pixar .px-mkt-bar span { display: block; border-radius: 999px; transition: width .4s ease; }
.pixar .px-mkt-bar-buy  { background: var(--px-up); }
.pixar .px-mkt-bar-sell { background: var(--px-down); }

/* --- pooled / age footer ---------------------------------------------------- */
.pixar .px-mkt-pool { margin: 0; padding: 4px 2px 0; border-top: 2px dashed rgba(120, 62, 30, .16); }
.pixar .px-mkt-pool > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(120, 62, 30, .1);
}
.pixar .px-mkt-pool > div:last-child { border-bottom: 0; }
.pixar .px-mkt-pool dt {
    font-size: 12px; font-weight: 700; color: var(--px-ink-3);
}
.pixar .px-mkt-pool dd {
    margin: 0;
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
    color: var(--px-ink); font-variant-numeric: tabular-nums;
    text-align: right;
}
.pixar .px-mkt-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 24px 18px;
}
.pixar .px-btn-sm { padding: 11px 20px; font-size: 13.5px; }
.pixar .px-mkt-stamp { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }

@media (max-width: 640px) {
    .pixar .px-mkt-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pixar .px-mkt-row-3 > .px-mkt-cell:last-child { grid-column: 1 / -1; }
    .pixar .px-mkt-cell-end { align-items: flex-start; text-align: left; }
    .pixar .px-mkt-head { padding: 15px 17px; }
    .pixar .px-mkt-sub { margin-left: 0; width: 100%; }
    .pixar .px-mkt-foot { padding: 12px 17px 16px; }
    .pixar .px-mkt-stamp { margin-left: 0; }
}

/* =========================== 18. PIXAR LAYER — LITEPAPER ======================== */
/* /whitepaper. Built from the same tokens and card shell as the landing page, so
   the two read as one site; what differs is density. A document wants a measure
   you can actually read down, so the clause column is capped near 68ch and the
   type is a step larger than the marketing copy — the landing page optimises for
   scanning, this page for reading.

   Everything resolves through --px-*, so section 16's night block recolours this
   page with no extra rules. */

/* --- masthead ---------------------------------------------------------------- */
.pixar .px-paper-head {
    position: relative; z-index: 3;
    padding: clamp(92px, 12vw, 140px) 20px clamp(30px, 4vw, 44px);
}
.pixar .px-paper-head-inner { max-width: 1080px; margin: 0 auto; }
.pixar .px-paper-title { margin: 0 0 clamp(16px, 2vw, 22px); }
.pixar .px-paper-lede {
    max-width: 56ch;
    margin: 0 0 clamp(26px, 3.4vw, 36px);
    font-size: clamp(16px, 1.7vw, 19px);
    font-weight: 600;
    line-height: 1.65;
    color: var(--px-ink-2);
}
.pixar .px-paper-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0;
}
.pixar .px-paper-meta > div {
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 17px;
    border-radius: var(--px-radius-s);
    border: 2px solid var(--px-edge);
    background: var(--px-inlay);
}
.pixar .px-paper-meta dt {
    font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--px-ink-3);
}
.pixar .px-paper-meta dd {
    margin: 0;
    font-family: var(--font-display); font-weight: 800; font-size: 15px;
    color: var(--px-ink);
}

/* --- two-column shell -------------------------------------------------------- */
.pixar .px-paper {
    position: relative; z-index: 3;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(26px, 4vw, 54px);
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px clamp(50px, 7vw, 90px);
}

/* --- contents rail ----------------------------------------------------------- */
.pixar .px-paper-toc { position: sticky; top: 96px; align-self: start; }
.pixar .px-paper-toc h2 {
    margin: 0 0 12px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--px-ink-3);
}
.pixar .px-paper-toc ol { list-style: none; margin: 0; padding: 0; }
.pixar .px-paper-toc li { margin-bottom: 3px; }
.pixar .px-paper-toc a {
    display: flex; align-items: baseline; gap: 9px;
    padding: 9px 13px;
    border-radius: 13px;
    border: 2px solid transparent;
    font-size: 13.5px; font-weight: 700;
    color: var(--px-ink-2);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pixar .px-paper-toc a:hover { background: var(--px-inlay); color: var(--px-red); }
.pixar .px-paper-toc a.is-on {
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    border-color: var(--px-edge);
    color: var(--px-berry);
    box-shadow: 0 3px 0 rgba(120, 62, 30, .12);
}
.pixar .px-paper-toc em {
    flex: none;
    font-style: normal;
    font-family: var(--font-display); font-weight: 800; font-size: 11px;
    color: var(--px-red);
}
/* the unnumbered front/back matter still needs to line up with the numbered rows */
.pixar .px-paper-toc a > span:only-child { margin-left: 25px; }

/* --- clauses ----------------------------------------------------------------- */
.pixar .px-paper-body { max-width: 68ch; }
.pixar .px-clause {
    position: relative;
    padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
    margin-bottom: 14px;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 8px 0 -2px var(--px-ground), 0 18px 34px -16px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
    scroll-margin-top: 96px;
}
.pixar .px-clause-n {
    display: inline-block;
    margin-bottom: 9px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 2.5px solid var(--px-edge);
    background: linear-gradient(180deg, var(--px-gold), var(--px-gold-2));
    box-shadow: 0 3px 0 rgba(120, 62, 30, .16);
    font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
    letter-spacing: .06em;
    color: #4a2e05;
}
.pixar .px-clause h2 {
    margin: 0 0 12px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.2;
    color: var(--px-berry);
}
/* Abstract and Closing carry no clause number, so they take the quieter head —
   they frame the document rather than being part of its numbered argument. */
.pixar .px-clause h2.is-matter {
    font-size: clamp(13px, 1.5vw, 15px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--px-ink-3);
}
.pixar .px-clause p {
    margin: 0 0 12px;
    font-size: clamp(15px, 1.6vw, 16.5px);
    font-weight: 600;
    line-height: 1.75;
    color: var(--px-ink-2);
}
.pixar .px-clause p:last-child { margin-bottom: 0; }
.pixar .px-paper-body .px-contract { margin-top: 24px; }

@media (max-width: 980px) {
    /* The rail becomes a scrollable chip row above the text instead of vanishing,
       so the overview survives on a phone. */
    .pixar .px-paper { grid-template-columns: minmax(0, 1fr); }
    .pixar .px-paper-toc { position: static; margin-bottom: 22px; }
    .pixar .px-paper-toc ol {
        display: flex; gap: 7px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .pixar .px-paper-toc ol::-webkit-scrollbar { display: none; }
    .pixar .px-paper-toc li { margin-bottom: 0; }
    .pixar .px-paper-toc a {
        white-space: nowrap;
        border-color: var(--px-edge);
        background: var(--px-inlay);
    }
    .pixar .px-paper-toc a > span:only-child { margin-left: 0; }
    .pixar .px-paper-body { max-width: none; }
}

/* =========================== 19. PIXAR LAYER — PRICE CHART ====================== */
/* The $BBD close series above the market card. Shares the card shell of .px-mkt-card
   so the two panels read as a pair; what differs is that the plot is coloured by
   direction — the line and the gradient beneath it both inherit currentColor from
   .px-chart-plot, so a single class on the wrapper drives both. */
.pixar .px-chart { position: relative; z-index: 3; padding: 0 20px clamp(20px, 3vw, 30px); }
.pixar .px-chart[hidden] { display: none; }
.pixar .px-chart-card {
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--px-radius);
    border: 3px solid var(--px-edge);
    background: var(--px-paper);
    box-shadow: 0 10px 0 -2px var(--px-ground), 0 22px 40px -14px var(--px-shadow),
                inset 0 3px 0 var(--px-inset);
}
.pixar .px-chart-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
    padding: 18px 24px 14px;
    background: linear-gradient(180deg, var(--px-cream-2), transparent);
}
.pixar .px-chart-id h2 {
    margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px;
    color: var(--px-berry);
}
.pixar .px-chart-sub { font-size: 11.5px; font-weight: 700; color: var(--px-ink-3); }
.pixar .px-chart-now { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pixar .px-chart-last {
    font-family: var(--font-display); font-weight: 800; font-size: 24px;
    color: var(--px-red); font-variant-numeric: tabular-nums; line-height: 1;
}
.pixar .px-chart-chg {
    font-family: var(--font-display); font-weight: 800; font-size: 13px;
    color: var(--px-ink-3); font-variant-numeric: tabular-nums;
}
.pixar .px-chart-chg.is-up   { color: var(--px-up); }
.pixar .px-chart-chg.is-down { color: var(--px-down); }

.pixar .px-chart-tabs { display: flex; gap: 7px; padding: 0 24px 12px; }
.pixar .px-chart-tab {
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--px-edge); background: var(--px-inlay);
    font-family: var(--font-display); font-weight: 800; font-size: 11px;
    letter-spacing: .08em; color: var(--px-ink-3);
    transition: transform .18s var(--px-bounce), background .18s ease, color .18s ease;
}
.pixar .px-chart-tab:hover { transform: translateY(-1px); }
.pixar .px-chart-tab.is-on {
    background: linear-gradient(180deg, var(--px-hi), var(--px-cream-2));
    border-color: var(--px-red); color: var(--px-berry);
}

/* The SVG stretches to the box and the viewBox does the scaling, so there is no
   resize listener anywhere — preserveAspectRatio="none" is doing that work. */
.pixar .px-chart-plot {
    position: relative;
    height: clamp(170px, 22vw, 250px);
    color: var(--px-up);                    /* inherited by line + gradient */
    background: var(--px-inlay);
    border-top: 2px dashed rgba(120, 62, 30, .16);
}
.pixar .px-chart-plot.is-down { color: var(--px-down); }
.pixar .px-chart-plot svg { display: block; width: 100%; height: 100%; }
.pixar .px-chart-plot.is-empty svg { opacity: 0; }
.pixar .px-chart-empty {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700; color: var(--px-ink-3);
}
/* `display:grid` above outranks the UA rule behind the `hidden` attribute, so
   without this the placeholder sits on top of a perfectly good chart. Any class
   that sets display must restate the hidden case itself. */
.pixar .px-chart-empty[hidden] { display: none; }
.pixar .px-chart-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 24px 16px;
    font-family: var(--font-display); font-weight: 800; font-size: 12px;
    color: var(--px-ink-2); font-variant-numeric: tabular-nums;
}
.pixar .px-chart-range-lbl {
    flex: 1; text-align: center;
    font-family: var(--font-body); font-weight: 700; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--px-ink-3);
}

@media (max-width: 560px) {
    .pixar .px-chart-head { padding: 15px 17px 12px; }
    .pixar .px-chart-tabs { padding: 0 17px 10px; }
    .pixar .px-chart-foot { padding: 10px 17px 14px; }
}