* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* Scroll-snap "break": from the top (banner + price + chart) one scroll
   settles with the price ticker pinned to the top — banner scrolled away,
   the live chart filling the view — and STOPS there before the indicator
   charts below. `proximity` keeps everything lower down scrolling freely. */
html { scroll-snap-type: y proximity; }

/* Price Ticker Bar */
.price-ticker {
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
    padding: 15px 20px;
    /* grid lets the price span two rows with %-change + time stacked beside it */
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 18px;
    row-gap: 2px;
    border-bottom: 2px solid #f7931a;
    /* The "break": one scroll pins the price here (banner gone); a fast
       flick can't skip past it into the indicator charts below. */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* display:contents lets price-value, price-change and the time become direct
   grid items so the time can sit directly under the percentage (pure CSS) */
.price-display {
    display: contents;
}

.price-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.price-value {
    grid-column: 1;
    grid-row: 1 / 3;            /* span both rows, beside the stacked %/time */
    font-family: 'B612 Mono', monospace;
    font-size: 4.4rem;
    font-weight: 700;
    /* tabular figures keep the price width fixed as digits change */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: #f7931a;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.5);
}

.price-change {
    grid-column: 2;
    grid-row: 2;               /* below the time */
    justify-self: start;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.price-change.positive {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.price-change.negative {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.price-change.neutral {
    background: rgba(136, 136, 136, 0.2);
    color: #888;
}

.exchange-badge {
    grid-column: 2;
    grid-row: 1;               /* time on top, above the percentage */
    justify-self: start;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.exchange-badge::before {
    content: '●';
    color: #00ff88;
    font-size: 0.5rem;
    animation: blink 20s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.updated-stack {
    display: flex;
    flex-direction: column;
    align-items: center;   /* center the date over the time */
    line-height: 1.3;
}

.last-updated {
    /* match the 7D LOW/HIGH labels (.range-label-text) */
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #b0b0b0;
}

.last-date {
    /* date line above the time — same color and weight as the time */
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #b0b0b0;
}

/* BTC ↔ STRC cross-link — small pill inside the pinned price strip (third
   grid column, spanning both rows beside the %-change/time stack). Lives
   here rather than in the header so it stays on screen while watching the
   price (scroll-snap pins the ticker with the banner scrolled away). Styled
   after the range-window pill so it reads as part of the same system. */
/* Dashboard switcher (BTC / STRC), stacked vertically in the pinned price
   strip — replaced the single ⇄ cycle link (owner req 2026-07-20). The
   current page's asset is lit (.active); the other one is a dimmed link to
   its dashboard's #price anchor. */
.asset-switch {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    /* row-gap / column-gap. Same pair on every asset button group so the
       spacing matches whichever way the group happens to be laid out —
       only the 5px applies here (single column, stacked). */
    gap: 5px 40px;
}

.asset-switch a {
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #8a8fa8;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(247, 147, 26, 0.15);
    border-radius: 999px;
    /* Owner-set 40px — a shade under iOS's 44px thumb-target guideline, but
       deliberate: it keeps the pills from out-growing the pinned price strip.
       Centre the label with flex and hold the height with min-height rather
       than padding it out — that keeps the target exactly 40px at every font
       size, including the shrunk one the <=480px block sets, where padding
       alone left these pills ~21px tall and fiddly to hit. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 22px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.asset-switch a:hover {
    background: rgba(247, 147, 26, 0.15);
    color: #f7931a;
}

.asset-switch a:focus-visible {
    outline: 2px solid rgba(247, 147, 26, 0.6);
    outline-offset: 1px;
}

.asset-switch a.active {
    color: #f7931a;
    background: rgba(247, 147, 26, 0.18);
    border-color: rgba(247, 147, 26, 0.55);
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

/* Header Banner */
header {
    background: linear-gradient(90deg, #f7931a 0%, #ffcd00 50%, #f7931a 100%);
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(247, 147, 26, 0.5);
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;   /* snap back here to reveal the banner (top) */
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    /* animation: shimmer 3s infinite; */
}

@keyframes shimmer {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
}

.logo-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.logo {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    color: #000;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.3);
    letter-spacing: 4px;
    position: relative;
    z-index: 1;
}

.logo .btc-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 2.5rem;
    animation: pulse 2s infinite;
}

/* Navigation Menu */
/* The translateY(-50%) centring makes .nav-menu a STACKING CONTEXT, which traps
   the dropdown's z-index:1000 inside it — so the panel used to lose to the live
   chart's positioned .lc-plot/#lc-svg further down the DOM. The SVG is
   transparent, so the menu still LOOKED on top while the chart silently ate the
   clicks on whichever items hung over it (the bottom entry was unclickable).
   z-index here lifts the whole nav subtree above the chart. Don't remove it. */
.nav-menu {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* Desktop only: pull the menu further from the right edge so the page's
   vertical scrollbar doesn't overlap it. Mobile (iPhone) keeps the tight 8px. */
@media (min-width: 769px) {
    .nav-menu {
        right: 28px;
    }
}

.hamburger {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 8px;
    padding: 12px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background 0.3s ease;
}

.hamburger:hover {
    background: rgba(0, 0, 0, 0.5);
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: rgba(26, 26, 46, 0.98);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background: rgba(247, 147, 26, 0.2);
    color: #f7931a;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.tagline {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #333;
    margin-top: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* Main Content */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    gap: 24px;
}

.chart-container {
    max-width: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    padding: 12px;
    box-shadow: 0 0 40px rgba(247, 147, 26, 0.2);
    border: 1px solid rgba(247, 147, 26, 0.3);
}

.chart-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Scroll "break" at the bottom: a downward scroll settles with the LAST chart
   (the Bitcoin 4-year Cycle on the home page) pinned to the TOP of the view, so
   the previous chart scrolls fully off the top and the footer (Disclaimer /
   Privacy Policy / Terms) shows below it. scroll-snap-stop keeps a fast flick
   from skipping past this resting point. */
main > .chart-container:last-child {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Ticker-less sub-pages (volume/, trend/): an upward scroll settles with the
   FIRST chart pinned to the top of the view — the banner stays scrolled away
   (the same "break" the price ticker provides on pages that still have it).
   One more deliberate upward scroll from there still reveals the banner. */
body.no-ticker main > .chart-container:first-child {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.chart-title {
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    /* margin-bottom: 15px; */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Different colors for each chart title */
.chart-title.bollinger {
    color: #f7931a;
}

.chart-title.rsi {
    color: #00d4ff;
}

.chart-title.macd {
    color: #ff6b9d;
}

.chart-title.adx {
    color: #f7931a;
}

.chart-title.atr {
    color: #00E5FF;
}

.chart-title.obv {
    color: #f7931a;
}

.chart-title.vol {
    color: #00ff88;
}

.chart-title.mfi {
    color: #00d4ff;
}

.chart-title.cross {
    color: #FFD700;
}

/*
.chart-title .icon {
    margin-right: 5px;
}*/

/* Footer */
footer {
    background: #000;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #333;
}

.copyright {
    color: #666;
    font-size: 0.9rem;
}

.copyright a {
    color: #f7931a;
    text-decoration: none;
}

.copyright a:hover {
    text-decoration: underline;
}

/* 24H Range Indicator */
.range-indicator {
    background: linear-gradient(90deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
    padding: 10px 20px 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.range-labels {
    display: flex;
    gap: 20px;
    align-items: center;
}

.range-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.range-label-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.range-label-value {
    font-family: 'B612 Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    /* tabular figures keep the 24H low/high width fixed as digits change */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.range-label.low .range-label-value {
    color: #ff4444;
}

.range-label.high .range-label-value {
    color: #00ff88;
}

.range-bar-container {
    flex: 1;
    max-width: 300px;
    min-width: 150px;
    padding: 0 10px;
}

/* "% of Nd range" — sits above the gradient bar. Moved out of the live chart
   card's footer 2026-07-05 (footer removed for chart height; the gauge labels
   beside the bar already show the same LOW/HIGH numbers). Dashboard pages
   only — charts/ and lstm/ have the bar but no intraday series to compute it. */
.range-pos {
    text-align: center;
    margin-bottom: 5px;
    font-family: 'B612 Mono', monospace;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: #f7931a;
    opacity: 0.9;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.range-bar {
    position: relative;
    height: 8px;
    background: linear-gradient(90deg, #ff4444 0%, #888 50%, #00ff88 100%);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.range-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.range-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.5s ease;
}

.marker-dot {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #f7931a;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.8), 0 0 20px rgba(247, 147, 26, 0.4);
}

/* 7D/15D/22D/30D window toggle — segmented pill next to the range bar */
.window-toggle {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.window-btn {
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b0b0b0;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.window-btn:hover {
    background: rgba(247, 147, 26, 0.15);
    color: #f7931a;
}

.window-btn:focus-visible {
    outline: 2px solid rgba(247, 147, 26, 0.6);
    outline-offset: 1px;
}

.window-btn.active {
    background: rgba(247, 147, 26, 0.18);
    color: #f7931a;
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.window-btn:disabled {
    opacity: 0.35;
    cursor: default;
    background: transparent;
    color: #b0b0b0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo {
        font-size: 2rem;
    }
    .logo .btc-icon {
        font-size: 1.8rem;
    }
    .price-value {
        font-size: 3.63rem;
    }
    .chart-title {
        font-size: 1.2rem;
    }
    header {
        padding: 15px 20px;
    }
    main {
        padding: 10px 6px;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .price-value {
        font-size: 2.97rem;
    }
    .price-change {
        font-size: 0.85rem;
        padding: 4px 8px;
    }
    .range-indicator {
        padding: 10px 15px 12px 15px;
        gap: 10px;
    }
    .range-label-value {
        font-size: 0.9rem;
    }
    .range-bar-container {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }
    .price-display {
        flex-direction: column;
        gap: 8px;
    }
    .price-value {
        font-size: 2.86rem;
    }
    .range-indicator {
        padding: 8px 10px 10px 10px;
        gap: 8px;
    }
    .range-label-text {
        font-size: 0.62rem;
    }
    .window-btn {
        font-size: 0.62rem;
        padding: 6px 12px;
    }
    .asset-switch a {
        font-size: 0.66rem;
        letter-spacing: 0.5px;
        /* horizontal only — the 40px min-height above is the tap target */
        padding: 0 16px;
    }
    .last-updated,
    .last-date {
        font-size: 0.62rem;
    }
    .range-label-value {
        font-size: 0.8rem;
    }
    .range-bar-container {
        max-width: 150px;
    }
    .marker-dot {
        width: 14px;
        height: 14px;
    }
}

/* ===== 24-Hour Live Chart ===== */
/* Tighter top padding (no title row here) so the chart starts near the top. */
.live-chart-card { padding-top: 8px; }
.lc-plot { position: relative; width: 100%; height: 420px; }
.lc-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lc-area { stroke: none; fill: url(#lc-grad); }
.lc-line {
    fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke; filter: url(#lc-glow);
}
/* Bollinger overlay — thin, no glow, drawn under the price line. Green upper
   band, red lower band, solid Deep-Sky-Blue SMA (window = the chart span). */
#lc-bb path { fill: none; stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Upper/lower bands run 10% thicker and full-vibrance like the SMA
   (owner preference); the glowing 2.5px price line still dominates. */
.lc-bb-upper { stroke: rgba(0, 255, 136, 0.7); stroke-width: 1.21; }
.lc-bb-mid   { stroke: rgba(0, 191, 255, 0.7); }
.lc-bb-lower { stroke: rgba(255, 68, 68, 0.7); stroke-width: 1.21; }
/* $1,000 price gridlines + labels (dark halo so labels read over the line). */
.lc-gridline { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-gridlabel {
    fill: rgba(255, 255, 255, 0.5);
    stroke: #0a0a0a; stroke-width: 3px; paint-order: stroke;
    font: 700 11px 'B612 Mono', monospace; letter-spacing: 0.5px;
}
/* Vertical date dividers + top labels (military YYYY-MM-DD), orange so they
   read as the time axis, distinct from the white $1,000 price gridlines. */
.lc-dateline { stroke: rgba(247, 147, 26, 0.22); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.lc-datelabel {
    fill: rgba(247, 147, 26, 0.72);
    stroke: #0a0a0a; stroke-width: 3px; paint-order: stroke;
    font: 700 11px 'B612 Mono', monospace; letter-spacing: 0.5px;
}
.live-chart-card.up   #lc-grad-top, .live-chart-card.up   #lc-grad-bot { stop-color: #00ff88; }
.live-chart-card.down #lc-grad-top, .live-chart-card.down #lc-grad-bot { stop-color: #ff4444; }
.live-chart-card.up   .lc-line { stroke: #00ff88; }
.live-chart-card.down .lc-line { stroke: #ff4444; }

.lc-axis {
    position: absolute; bottom: 2px; font-family: 'B612 Mono', monospace;
    font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}
.lc-axis-left { left: 4px; }
.lc-axis-right { right: 4px; color: rgba(247, 147, 26, 0.55); }

/* Live dot — hidden until the first draw flips the card to .up/.down. */
.lc-live-dot {
    display: none; position: absolute; width: 13px; height: 13px; border-radius: 50%;
    transform: translate(-50%, -50%); transition: left 0.6s ease, top 0.6s ease;
    pointer-events: none; z-index: 2;
}
.live-chart-card.up .lc-live-dot, .live-chart-card.down .lc-live-dot { display: block; }
.live-chart-card.up   .lc-live-dot { background: #00ff88; box-shadow: 0 0 8px #00ff88, 0 0 18px rgba(0, 255, 136, 0.6); }
.live-chart-card.down .lc-live-dot { background: #ff4444; box-shadow: 0 0 8px #ff4444, 0 0 18px rgba(255, 68, 68, 0.6); }
.lc-live-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: lc-pulse 1.7s ease-out infinite;
}
@keyframes lc-pulse { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(3.4); opacity: 0; } }

@media (max-width: 600px) {
    .lc-plot { height: 270px; }
}

/* ===== Legal pages (Disclaimer / Privacy / Terms) ===== */
.legal-wrap {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 22px 60px;
}
.legal-head { text-align: center; margin-bottom: 6px; }
.legal-head h1 {
    font-family: 'Orbitron', monospace;
    font-size: 2.1rem;
    font-weight: 900;
    color: #f7931a;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.35);
}
.legal-updated {
    margin-top: 10px;
    font-family: 'B612 Mono', monospace;
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 1px;
}
/* Sub-nav linking the three legal pages */
.legal-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 34px;
}
.legal-nav a {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: #cfd2e0;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid rgba(247, 147, 26, 0.3);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.legal-nav a:hover { background: rgba(247, 147, 26, 0.15); color: #f7931a; }
.legal-nav a.current {
    background: rgba(247, 147, 26, 0.18);
    color: #f7931a;
    border-color: rgba(247, 147, 26, 0.6);
}
/* Article prose */
.legal article {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(247, 147, 26, 0.25);
    border-radius: 15px;
    padding: 30px 34px;
    box-shadow: 0 0 40px rgba(247, 147, 26, 0.12);
    line-height: 1.7;
    color: #d7d9e3;
}
.legal article h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    color: #f7931a;
    margin: 30px 0 12px;
    letter-spacing: 1px;
}
.legal article h2:first-child { margin-top: 0; }
.legal article h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: #00d4ff;
    margin: 20px 0 8px;
}
.legal article p { margin: 0 0 14px; }
.legal article ul { margin: 0 0 16px; padding-left: 22px; }
.legal article li { margin-bottom: 8px; }
.legal article strong { color: #fff; }
.legal article a { color: #f7931a; text-decoration: none; }
.legal article a:hover { text-decoration: underline; }

/* ===== Footer legal links (site-wide) ===== */
.footer-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 12px;
}
.footer-legal a {
    color: #9a9cae;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.footer-legal a:hover { color: #f7931a; }
.footer-note {
    color: #6a6a78;
    font-size: 0.74rem;
    margin: 10px auto 0;
    max-width: 660px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .legal-head h1 { font-size: 1.6rem; }
    .legal article { padding: 22px 18px; }
}

/* ===== STRC market state (strc/ page; body.market-closed set by strc.js) ===== */
.market-state {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: #888;
}
.market-state.open { color: #00ff88; }
body.market-closed .exchange-badge::before { color: #666; animation: none; }
body.market-closed .live-chart-card .lc-live-dot {
    background: #8a8fa3;
    box-shadow: 0 0 6px rgba(138, 143, 163, 0.45);
}
body.market-closed .live-chart-card .lc-live-dot::after { animation: none; }

/* ===== News tape (EXPERIMENT, main dashboard only; header.tape-on set by main<N>.js) =====
   ONE slowly moving strip in place of the static logo: the brand
   "BitcoinPile.com" (the .logo look — Orbitron 3rem/900, 4px tracking, the
   same text-shadow and media sizes) followed by two stacked headline rows,
   a gap, the brand again, rows again ... The track holds K identical
   .news-copy blocks; the script measures one copy (W = its width + the gap),
   sets --tape-start (translate that centres copy 1's brand on the header
   exactly where .logo sits), --tape-shift (= W) and --tape-duration (= W /
   speed, 32 px/s desktop, 26 px/s on phones) inline, and news-scroll moves
   the track exactly one copy per iteration, so the snap back lands on an
   identical picture. Copy 0 is the lead-in (.news-copy--lead, invisible
   during the first iteration only), so at page load the brand sits alone at
   the centre with nothing to its left and the rows enter behind it.
   EVERY rule is scoped under header.tape-on / .news-tape, so without JS, on a
   failed fetch or with an empty /news.json the header is pixel-identical to
   before. header.tape-on hides .logo-link and keeps its own layout (flex,
   centred, 20px 40px padding) — the tape is align-self:stretch + flex:1 and
   full-bleed (negative left margin undoing the padding; right margin leaving
   the hamburger clear) so the strip traverses the whole width. The copy's
   height is max(brand line box, rows block): the rows are Roboto 1.8rem on
   2 x 34.5px lines (a 69px block — +50% over the 1.2rem/57px of the first
   two-row version, owner request 2026-09-10), which outgrows the 3rem
   brand's 61px line box, so the header grows from 101px to about 109px on
   desktop (20px padding each side); at 481-768px the rows keep their 69px
   against the 2rem brand's 40px line box (15px padding), so there the
   header goes from 70px to about 99px — the biggest jump of the three
   tiers; at <= 480px the 2 x 30px rows (60px) take it to about 90px (15px
   padding; was 81px with the old block, 66px without the tape). That
   growth is wanted — the brand keeps its 3rem / 2rem / 1.8rem and stays
   vertically centred against the taller block (align-items:center on the
   copy). Since the block is built only after the fonts settle and the news
   fetch lands, the growth also shows once per page load as a downward
   shift of everything below the header — 8px desktop, 29px at 481-768px,
   24px phone (the 57px block shifted 0 / 17 / 15) — accepted with the +50%
   rather than pre-reserving the height, which would break the
   pixel-identical fallback below. The source
   name (.news-src, the " — Bitcoin Magazine" tail) is navy #000080 at
   weight 400, full opacity, so it reads apart from the black title. The
   tape is position:relative + z-index:1 like
   .logo — header::before is an absolute shimmer layer covering the header,
   and an unpositioned tape would sit under it with unclickable links. The
   tape stops short of the hamburger (.nav-menu, absolute, right 28px desktop
   / 8px phone, 44px wide), ending 12px before it, and a mask fades the text
   out towards that edge (and 32px in from the left), so moving text never
   passes under the button. */
header.tape-on .logo-link {
    display: none;
}
.news-tape {
    position: relative;
    z-index: 1;
    align-self: stretch;
    flex: 1;
    min-width: 0;
    /* left edge at the header's edge (undo the 40px padding); right edge
       12px clear of the hamburger's left side (right 28px + 44px wide) */
    margin: 0 44px 0 -40px;
    /* clip, not hidden: an overflow:hidden box is still a scroll container,
       so keyboard focus / find-in-page scrolls it and the offset sticks
       after blur — the running animation then shows a blank tape. clip is
       not scrollable at all; hidden stays as the fallback for old engines. */
    overflow: hidden;
    overflow: clip;
    text-align: left;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 56px), transparent 100%);
}
.news-track {
    display: flex;
    align-items: center;
    width: max-content;
    column-gap: 90px;                 /* the gap between one copy and the next (part of W) */
    animation: news-scroll var(--tape-duration, 90s) linear infinite;
    will-change: transform;
}
/* pause so a headline can be clicked / tabbed to */
.news-tape:hover .news-track,
.news-tape:focus-within .news-track {
    animation-play-state: paused;
}
@keyframes news-scroll {
    from { transform: translateX(var(--tape-start, 0px)); }
    to   { transform: translateX(calc(var(--tape-start, 0px) - var(--tape-shift, 0px))); }
}
.news-copy {
    flex: none;
    display: flex;
    align-items: center;
    column-gap: 24px;
    white-space: nowrap;
}
.news-copy--lead {
    visibility: hidden;               /* the lead-in: blank left of the brand during the first iteration */
}
/* the brand = .logo's look, so at t=0 it is indistinguishable from the static logo */
.news-brand {
    flex: none;
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    color: #000;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.3);
    letter-spacing: 4px;
    text-decoration: none;
}
.news-rows {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 69px;                 /* 2 rows x 34.5px, kept even with fewer rows */
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;                /* 28.8px — +50% (owner, 2026-09-10) */
    line-height: 34.5px;
}
.news-row {
    display: flex;
    align-items: center;
    height: 34.5px;
}
.news-item {
    flex: none;
    color: #111;
    font-weight: 500;
    text-decoration: none;
}
.news-item:hover,
.news-item:focus {
    text-decoration: underline;
}
.news-src {
    color: #000080;                   /* navy, full opacity (owner, 2026-09-10) */
    font-weight: 400;
}
.news-sep {
    flex: none;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.6em;
    padding: 0 26px;                  /* 26px ≈ 0.9em at 1.8rem (was 17px at 1.2rem) */
}
@media (max-width: 768px) {
    .news-tape {
        /* header padding is 20px here; hamburger sits at right 8px + 44px wide */
        margin: 0 44px 0 -20px;
    }
    .news-brand {
        font-size: 2rem;
    }
}
@media (max-width: 480px) {
    .news-brand {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }
    .news-track {
        column-gap: 70px;
    }
    .news-rows {
        min-height: 60px;             /* 2 rows x 30px */
        font-size: 1.575rem;          /* 25.2px — +50% over 1.05rem */
        line-height: 30px;
    }
    .news-row {
        height: 30px;
    }
    .news-sep {
        padding: 0 18px;              /* 18px ≈ 0.71em at 1.575rem (was 12px at 1.05rem) */
    }
}
@media (prefers-reduced-motion: reduce) {
    /* no motion: the strip rests at its start position — brand centred like
       the static logo, the rows to its right, the lead-in copy never shown */
    .news-track {
        animation: none;
        transform: translateX(var(--tape-start, 0px));
    }
}