/* ==========================================================================
   Global Styles - Adanos Software
   ========================================================================== */

/* Self-hosted fonts */
@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Arial');
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 107%;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Colors - Text */
    --c-text: #1a1a1a;
    --c-text-secondary: #444;
    --c-muted: #888;
    --c-light: #999;
    --c-label: #7f786f;
    --c-white: #fff;
    --c-logo-graphite: #454e54;

    /* Colors - Semantic */
    --c-green: #2e7d32;
    --c-red: #c62828;
    --c-blue: #1565c0;
    --c-logo-gold-rgb: 224, 160, 74;
    /* Accent gold. Distinct from the logo gold above, which is lighter. */
    --c-accent-gold: #c9a44e;
    --c-logo-gold-gradient: linear-gradient(90deg, #dea35f 0%, #edc57d 48%, #f8dda1 100%);
    --c-bg: #f8f7f3;
    --c-bg-gradient: #f0efec;

    /* Colors - Borders */
    --c-border: #ebe7df;
    --c-border-light: #f3eee6;
    --c-border-medium: #d8d2c8;
    --c-border-dark: #333;

    /* Colors - States */
    --c-bg-hover: #f5f5f5;
    --c-success: var(--c-green);
    --c-error-bg: #fef2f2;
    --c-error-border: #fecaca;
    --c-error-text: #dc2626;

    /* Colors - Code Display */
    --c-code-bg: #f8fafc;
    --c-code-text: #d4d4d4;
    --c-code-block: #0a0a0a;

    /* Form Fields */
    --field-bg: #fcfbf8;
    --field-border-color: #d8d2c8;
    --field-border-color-focus: var(--c-text);
    --field-placeholder-color: #8c857d;
    --field-radius: 10px;
    --field-padding-y: 14px;
    --field-padding-x: 16px;

    /* Fonts */
    --font-sans: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Type Scale: 13 · 15 · 16 · 20 · 24 · 32 · 40 · 48 */
    --h1-page-desktop-size: clamp(44px, 6vw, 72px);
    --h1-mobile-size: 36px;
    --card-heading-font-size: 20px;
    --card-heading-font-weight: 600;
    --card-heading-line-height: 1.6;
    --card-heading-letter-spacing: -0.02em;

    /* Sizing */
    --max-width: 1200px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* The table skeleton must render at exactly the sparkline's size or rows
       jump when live data replaces it. Shared here so that stays true. */
    --sparkline-w: 80px;
    --sparkline-h: 32px;

    /* Spacing */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

    /* Dark panel overlay tints (used by docs-section, endpoint cards) */
    --c-panel-dark-bg: rgba(255,255,255,0.03);
    --c-panel-dark-border: rgba(255,255,255,0.08);

    /* Native select dropdown arrow (shared across field-control--select, trending period) */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E");

    /* Shared subpage hero grid */
    --subpage-grid-top: 73px;
    --subpage-grid-height: 720px;
    --subpage-grid-position:
        0 var(--subpage-grid-top),
        0 var(--subpage-grid-top);
    --subpage-grid-size:
        100% var(--subpage-grid-height),
        100% var(--subpage-grid-height);
    --subpage-grid-image:
        repeating-linear-gradient(to right, rgba(0,0,0,0.03) 0 1px, transparent 1px 80px),
        repeating-linear-gradient(to bottom, rgba(0,0,0,0.03) 0 1px, transparent 1px 80px);
}

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

/* Base */
body {
    font-family: var(--font-sans);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: var(--c-text); text-decoration: underline; }
a:hover { color: var(--c-muted); }

h1 {
    font-size: var(--h1-page-desktop-size);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--c-text);
}

body.page-sentiment,
body.page-blog,
body.page-legal {
    background-color: var(--c-bg);
    background-image: var(--subpage-grid-image);
    background-position: var(--subpage-grid-position);
    background-size: var(--subpage-grid-size);
    background-repeat: no-repeat;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 16px 48px;
    background: rgba(248,247,244,0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
    z-index: 100;
}

.nav-inner {
    max-width: calc(var(--max-width) - 96px);
    margin: 0 auto;
    justify-content: space-between;
}

/* Flex (not the default block) so the logo link has no text line-box: as a
   block the div's line-height made it taller than the logo image and the image
   sat on the baseline, leaving more space below the logo than above it. */
.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.logo img {
    display: block;
    width: 126px;
    height: 36px;
    transform: translateY(-0.5px);
}

.nav-left { gap: 32px; }
.nav-right { gap: 24px; }
.nav-link { font-size: 15px; color: var(--c-text-secondary); text-decoration: none; transition: color 0.2s; }
.nav-link:hover { color: var(--c-text); }

.nav-btn {
    font-size: 15px;
    line-height: 1;
    color: var(--c-white);
    background: var(--c-text);
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid var(--c-text);
    border-radius: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}
/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    gap: 8px;
    font-size: 15px;
    line-height: 1;
    color: var(--c-text);
    background: var(--c-white);
    border: 1px solid var(--c-border-medium);
    border-radius: 6px;
    cursor: pointer;
    padding: 12px 20px;
    font-family: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.nav-dropdown-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.nav-dropdown-icon {
    transition: transform 0.2s;
}

.nav-dropdown:focus-within .nav-dropdown-icon,
.nav-dropdown.is-open .nav-dropdown-icon {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 360px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    z-index: 200;
    overflow: hidden;
}

.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    gap: 14px;
    padding: 14px 20px;
    text-decoration: none;
    transition: background 0.15s;
}

.nav-dropdown-item:hover { background: var(--c-bg); }

.nav-dropdown-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--nav-icon-bg, var(--field-bg));
    color: var(--nav-icon-fg, var(--c-text));
}

.nav-dropdown-icon-wrap svg {
    width: 26px;
    height: 26px;
    color: currentColor;
    fill: currentColor;
}

.nav-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-dropdown-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text);
}

.nav-dropdown-desc {
    font-size: 13px;
    color: var(--c-muted);
}

.external-icon {
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.5;
}

/* Mobile Navigation Toggle */
#nav-mobile-checkbox {
    display: none;
}

.nav-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-mobile-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-text);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

#nav-mobile-checkbox:checked ~ .nav-inner .nav-mobile-toggle .nav-mobile-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#nav-mobile-checkbox:checked ~ .nav-inner .nav-mobile-toggle .nav-mobile-bar:nth-child(2) {
    opacity: 0;
}

#nav-mobile-checkbox:checked ~ .nav-inner .nav-mobile-toggle .nav-mobile-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.nav-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-white);
    border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    padding: 24px;
}

#nav-mobile-checkbox:checked ~ .nav-mobile-menu {
    display: block;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
}

body:has(#nav-mobile-checkbox:checked) {
    overflow: hidden;
}

.nav-mobile-section {
    margin-bottom: 20px;
}

.nav-mobile-section:last-child { margin-bottom: 0; }

.nav-mobile-label {
    margin-bottom: 12px;
}

.nav-mobile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-size: 15px;
    color: var(--c-text);
    text-decoration: none;
    border-bottom: 1px solid var(--c-border-light);
}

.nav-mobile-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: 6px;
}

.nav-mobile-btn + .nav-mobile-btn {
    margin-top: 12px;
}

.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { color: var(--c-muted); }

.nav-mobile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: var(--nav-icon-bg, var(--field-bg));
    color: var(--nav-icon-fg, var(--c-text));
}

/* Icon palette (shared between desktop dropdown and mobile menu) */
.nav-dropdown-icon-wrap.reddit {
    --nav-icon-bg: #f7e3d8;
    --nav-icon-fg: #c96a1a;
}

.nav-mobile-icon.reddit {
    --nav-icon-bg: #f7e3d8;
    --nav-icon-fg: #b45309;
}

.nav-dropdown-icon-wrap.crypto,
.nav-mobile-icon.crypto {
    --nav-icon-bg: #f7e9b8;
    --nav-icon-fg: #a66b00;
}

.nav-dropdown-icon-wrap.reddit svg {
    width: 30px;
    height: 30px;
}

.nav-dropdown-icon-wrap.crypto svg {
    width: 32px;
    height: 32px;
}

.nav-mobile-icon.reddit svg {
    width: 24px;
    height: 24px;
}

.nav-mobile-icon.crypto svg {
    width: 26px;
    height: 26px;
}

.nav-dropdown-icon-wrap.x,
.nav-mobile-icon.x {
    --nav-icon-bg: #ece8e0;
    --nav-icon-fg: #2a2a2a;
}

.nav-dropdown-icon-wrap.news,
.nav-mobile-icon.news {
    --nav-icon-bg: #d9f3e2;
    --nav-icon-fg: #18794e;
}

.nav-dropdown-icon-wrap.stockalert,
.nav-mobile-icon.stockalert {
    --nav-icon-bg: #dde8ff;
    --nav-icon-fg: #215bd8;
}

.nav-dropdown-icon-wrap.polymarket,
.nav-mobile-icon.polymarket {
    --nav-icon-bg: #dce6ff;
    --nav-icon-fg: #2f5bda;
}

.nav-dropdown-icon-wrap.cli,
.nav-mobile-icon.cli {
    --nav-icon-bg: #e9e5de;
    --nav-icon-fg: #1f1f1f;
}

.nav-mobile-icon svg {
    width: 20px;
    height: 20px;
    color: currentColor;
    fill: currentColor;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 16px 32px;
    background: var(--c-text);
    color: var(--c-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover,
.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--c-white);
}

.btn-secondary {
    background: var(--c-white);
    color: var(--c-text);
    border: 1px solid var(--c-border-medium);
}

.btn-secondary:hover {
    box-shadow: var(--shadow-sm);
    /* Needed: a:hover (0,1,1) outranks .btn-secondary (0,1,0). */
    color: var(--c-text);
}

.btn-secondary:focus-visible {
    border-color: var(--c-text);
    color: var(--c-text);
}

.btn-compact {
    padding: 10px 18px;
    font-size: 13px;
}

/* Primary .btn gets a trailing arrow that slides on hover/focus.
   Excludes .btn-secondary, .btn-copy and any .btn that already contains its own
   SVG icon (avoids dual-icon look on 404/unsubscribe "Back to Home" buttons).
   The `/ ""` syntax marks the arrow as decorative for screen readers. */
.btn:not(.btn-secondary, .btn-copy):not(:has(svg))::after {
    content: "→" / "";
    display: inline-block;
    margin-left: var(--space-1);
    transition: transform 0.2s;
}
.btn:not(.btn-secondary, .btn-copy):not(:has(svg)):hover::after,
.btn:not(.btn-secondary, .btn-copy):not(:has(svg)):focus-visible::after {
    transform: translateX(3px);
}
.btn:not(.btn-secondary, .btn-copy):not(:has(svg)):disabled::after {
    display: none;
}

/* ==========================================================================
   Sections
   ========================================================================== */

section {
    padding: 48px;
    max-width: var(--max-width);
    margin: 0 auto;
    scroll-margin-top: 80px;
}


/* ==========================================================================
   Card Component (shared base styles)
   ========================================================================== */

.card {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
}

.card--padded { padding: 40px; }
.card--padded-sm { padding: 32px; }

.content-block h3,
.contact-title,
.product-card h3,
.about-highlight h3,
.api-form-card h3,
.faq-item h3,
.pricing-header h3,
.pricing-card > h3 {
    font-size: var(--card-heading-font-size);
    font-weight: var(--card-heading-font-weight);
    line-height: var(--card-heading-line-height);
    letter-spacing: var(--card-heading-letter-spacing);
}

/* ==========================================================================
   Design System Primitives
   ========================================================================== */

/* .api-bridge-actions carried a byte-identical copy of this rule. */
.action-group,
.api-bridge-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.action-group--center {
    justify-content: center;
}

.content-block {
    margin-bottom: var(--space-4);
}

.content-block:last-child {
    margin-bottom: 0;
}

.content-block h3 {
    margin-bottom: var(--space-3);
}

.content-block p {
    color: var(--c-text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 760px;
}

.stack--spaced {
    margin-bottom: var(--space-8);
}

.pricing-grid--spaced,
.endpoint--spaced {
    margin-top: var(--space-6);
}

.live-indicator--hidden {
    visibility: hidden;
    opacity: 0;
}

.hidden,
.btn-loading,
.form-error,
.api-success {
    display: none;
}

.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted);
    margin-bottom: 6px;
}

.field-control {
    --field-font-size: 13px;
    width: 100%;
    padding: var(--field-padding-y) var(--field-padding-x);
    font-family: var(--font-sans);
    font-size: var(--field-font-size);
    background: var(--field-bg);
    border: 1px solid var(--field-border-color);
    border-radius: var(--field-radius);
    color: var(--c-text);
    transition: border-color 0.2s, background-color 0.2s;
}

.field-control::placeholder {
    color: var(--field-placeholder-color);
}

.field-control:focus {
    outline: none;
    border-color: var(--field-border-color-focus);
}

.field-control:focus-visible {
    outline: 2px solid var(--c-text);
    outline-offset: 2px;
}

.field-control--select {
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

.field-control:disabled {
    color: var(--c-muted);
    background: var(--c-bg-hover);
    cursor: not-allowed;
    opacity: 0.6;
}

.field-note {
    margin-top: 6px;
    font-size: 13px;
    color: var(--c-muted);
}

/* Shared tooltip: .has-tooltip element gets `data-tooltip="..."`
   Variants override positioning and max-width only. */
.has-tooltip {
    position: relative;
    cursor: help;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    background: var(--c-text);
    color: var(--c-white);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    pointer-events: none;
}

.has-tooltip:focus-visible::after,
.has-tooltip.is-tooltip-open::after {
    opacity: 1;
    visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
    .has-tooltip:hover::after {
        opacity: 1;
        visibility: visible;
    }
}

.has-tooltip:focus-visible {
    outline: 2px solid var(--c-text);
    outline-offset: 3px;
}

/* ==========================================================================
   Feature List Component (checkmark lists)
   ========================================================================== */

.feature-list {
    list-style: none;
    margin: 24px 0;
}

.feature-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border-light);
    gap: 10px;
    font-size: 15px;
    color: var(--c-text-secondary);
}

.feature-list li:last-child { border-bottom: none; }

.feature-list li::before {
    content: "\2713";
    color: var(--c-green);
    font-weight: 600;
    flex-shrink: 0;
}

/* ==========================================================================
   Ticker columns
   Editorial multi-column list of stock links (e.g. reddit-top-100
   "Popular Tickers"): company name on the left, mono ticker on the right.
   ========================================================================== */
.ticker-columns {
    columns: 4;
    column-gap: 40px;
    max-width: 1000px;
}

.ticker-columns a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-border);
    break-inside: avoid;
    text-decoration: none;
}

.ticker-columns .tc-name {
    font-size: 15px;
    color: var(--c-text-secondary);
}

.ticker-columns .tc-ticker {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-muted);
}

.ticker-columns a:hover span {
    color: var(--c-text);
}

.ticker-columns-more {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1.5px solid var(--c-text);
    padding-bottom: 1px;
}

@media (max-width: 1024px) {
    .ticker-columns { columns: 3; }
}

@media (max-width: 768px) {
    .ticker-columns { columns: 2; }
}

@media (max-width: 480px) {
    .ticker-columns { columns: 1; }
}

/* ==========================================================================
   Label Component (unified)
   Base styles applied to all label-like elements
   ========================================================================== */

/* Base label styles */
.label,
.nav-mobile-label,
.trending-tags-label,
.trending-period-label,
.stock-table th,
.docs-info-item h4,
.endpoint h4,
.endpoint-selector label,
.footer-heading,
.pricing-badge,
.method,
.ticker-overlay-title,
.ticker-overlay-stat .stat-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-label);
}

/* Utility: flex center */
.flex-center,
.nav-dropdown-icon-wrap,
.nav-mobile-icon,
.ticker-overlay-close,
.customer-logos-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Utility: pill shape */
.pill,
.pricing-badge,
.trending-filter-btn,
.trending-period select,
.trending-tag {
    border-radius: 100px;
}

/* Utility: flex row (align center) */
.flex-row,
.nav-inner,
.nav-left,
.nav-right,
.nav-dropdown-toggle,
.nav-dropdown-item,
.feature-list li,
.trending-controls,
.trending-period,
.trending-tag,
.trending-tag-icon,
.sentiment-bar,
.footer-bottom,
.footer-green,
.pricing-callout {
    display: flex;
    align-items: center;
}

/* Utility: monospace font */
.mono,
.stock-table .rank,
.stock-table .ticker,
.stock-table .buzz,
.stock-table .mentions,
.stock-table .table-rank-num,
.sentiment-value,
.trending-tag-score,
.method,
.endpoint-selector select,
.endpoint-header code,
.endpoint pre code,
.params-table code,
.ticker-overlay-stat .stat-value,
.trending-updated {
    font-family: var(--font-mono);
}

/* Utility: inline code */
.docs-section > .docs-inner > p code,
.docs-info-item code,
.faq-item code {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
}

.section-label,
.live-indicator {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-secondary);
    margin-bottom: 12px;
}

section h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
}

section > p {
    color: var(--c-text-secondary);
    font-size: 16px;
    margin-bottom: 32px;
    max-width: 600px;
}

/* ==========================================================================
   Pulse Animation
   ========================================================================== */

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

.pulse-dot {
    --pulse-size: 8px;
    width: var(--pulse-size);
    height: var(--pulse-size);
    background: var(--c-green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact-section {
    background: var(--c-text);
    color: var(--c-white);
    border-radius: var(--radius-xl);
    padding: 48px;
    text-align: center;
    margin: 0 auto 48px;
    width: calc(100% - 96px);
    max-width: 1104px;
    position: relative;
    overflow: hidden;
    scroll-margin-top: 80px;
}

.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 60%);
}

.contact-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    border-radius: 50%;
}

.contact-section > * { position: relative; z-index: 1; }
.contact-title {
    color: var(--c-white);
    margin-bottom: var(--space-3);
}
.contact-section p { color: var(--c-light); margin-bottom: 32px; }
.contact-section .section-label { color: var(--c-muted); }

.contact-section a {
    color: var(--c-white);
    font-size: 24px;
    text-decoration: none;
    border-bottom: 2px solid var(--c-text-secondary);
    padding-bottom: 4px;
    transition: border-color 0.2s;
}
.contact-section a:hover { border-color: var(--c-white); }
.contact-section a.contact-link { font-size: 20px; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    padding: 80px 48px 48px;
    border-top: 4px solid transparent;
    border-image: var(--c-logo-gold-gradient) 1;
    background: var(--c-text);
    color: var(--c-muted);
    font-size: 13px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 48px;
    max-width: calc(var(--max-width) - 96px);
    margin: 0 auto 48px;
}

.footer-heading {
    color: var(--c-white);
    font-weight: 600;
    margin-bottom: 16px;
}

.footer-col p { margin: 6px 0; line-height: 1.6; }
.footer-col a { color: var(--c-muted); text-decoration: none; }
.footer-col a:hover { color: var(--c-white); }

.footer-bottom {
    max-width: calc(var(--max-width) - 96px);
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid var(--c-border-dark);
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-green {
    gap: 6px;
}

.footer-green svg {
    flex-shrink: 0;
}

/* .m-hidden and the :root overrides live in the main 768px media query below */

/* ==========================================================================
   Homepage - Hero
   ========================================================================== */

.hero-wrapper {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-gradient) 100%);
}

/* Hero activity grid */
.hero-grid {
    position: absolute;
    top: 73px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: 80px 80px;
}

.hero-grid-highlight {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(var(--c-logo-gold-rgb), 0.12);
    opacity: 0;
    will-change: opacity;
    animation: heroGridHighlightPulse 18s ease-in-out infinite;
}

@keyframes heroGridHighlightPulse {
    0%, 90%, 100% { opacity: 0; }
    95% { opacity: 1; }
}

.hero {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    padding: 40px 48px 120px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.hero h1 {
    margin-bottom: 24px;
    max-width: 100%;
}

.hero h1 > span { color: var(--c-text); }

.hero p {
    font-size: 21px;
    color: var(--c-text-secondary);
    max-width: 100%;
    margin-bottom: 32px;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.6;
    min-height: 22px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-stat h3 {
    margin: 0;
}

.hero-stat-label {
    font-size: 13px;
    color: var(--c-text-secondary);
    font-weight: 400;
}

.card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--c-bg);
    color: var(--c-logo-graphite);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Stack Section - Architecture Visualization */
.stack-section {
    padding-bottom: 80px;
}

.stack {
    margin-top: 32px;
}

/* API Layer */
.stack-layer--api {
    margin-bottom: 32px;
}

/* Terminal */
.terminal {
    background: var(--c-code-block);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--c-text);
    border-bottom: 1px solid #2a2a2a;
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dot--red { background: #ff5f56; }
.terminal-dot--yellow { background: #ffbd2e; }
.terminal-dot--green { background: #27ca40; }

.terminal-title {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: #666;
}

.terminal-body {
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.8;
}

.terminal-line {
    opacity: 0;
}

.terminal--animate .terminal-line {
    animation: terminalFadeIn 0.3s ease forwards;
}

.terminal-line--comment {
    color: #6a9955;
}

.terminal-line--cmd {
    color: #e0e0e0;
}

.terminal-line--response {
    color: #4ec9b0;
    padding-left: 16px;
}

.terminal-line--blank {
    height: 1.8em;
}

/* Staggered animation delays */
.terminal--animate .terminal-line:nth-child(1) { animation-delay: 0.2s; }
.terminal--animate .terminal-line:nth-child(2) { animation-delay: 0.6s; }
.terminal--animate .terminal-line:nth-child(3) { animation-delay: 1.2s; }
.terminal--animate .terminal-line:nth-child(4) { animation-delay: 1.8s; }
.terminal--animate .terminal-line:nth-child(5) { animation-delay: 2.2s; }
.terminal--animate .terminal-line:nth-child(6) { animation-delay: 2.6s; }
.terminal--animate .terminal-line:nth-child(7) { animation-delay: 3.2s; }
.terminal--animate .terminal-line:nth-child(8) { animation-delay: 3.8s; }
.terminal--animate .terminal-line:nth-child(9) { animation-delay: 4.2s; }
.terminal--animate .terminal-line:nth-child(10) { animation-delay: 4.6s; }
.terminal--animate .terminal-line:nth-child(11) { animation-delay: 5.2s; }
.terminal--animate .terminal-line:nth-child(12) { animation-delay: 5.6s; }
.terminal--animate .terminal-line:nth-child(13) { animation-delay: 6s; }
.terminal--animate .terminal-line:nth-child(14) { animation-delay: 6.4s; }
.terminal--animate .terminal-line:nth-child(15) { animation-delay: 6.8s; }
.terminal--animate .terminal-line:nth-child(16) { animation-delay: 7.2s; }
.terminal--animate .terminal-line:nth-child(17) { animation-delay: 7.6s; }
.terminal--animate .terminal-line:nth-child(18) { animation-delay: 8s; }
.terminal--animate .terminal-line:nth-child(19) { animation-delay: 8.4s; }

@keyframes terminalFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   API Bridge - contextual "same data via API" block for free data pages
   ==========================================================================
   Ranking, index and directory pages earn most of the organic traffic but
   answer the visitor's question in full, so the visit ends at the table. This
   block sits directly under the data and shows the request that returns the
   very rows above it, which is the one moment where API intent is highest.
   Width and padding come from the shared `section` rule, so it lines up with
   the table above and the guide below. */
.api-bridge-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-5) var(--space-7);
    align-items: center;
}


.api-bridge h2 {
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}

.api-bridge-lead {
    color: var(--c-text-secondary);
    margin: 0 0 var(--space-4);
}

.api-bridge-facts {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: grid;
    gap: var(--space-1);
}

.api-bridge-facts li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    color: var(--c-text-secondary);
}

.api-bridge-facts li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--c-logo-gold-rgb));
}

/* Spans both columns: the note addresses people who already have a key, so it
   belongs under the whole block rather than beside the sample. */
.api-bridge-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 15px;
    color: var(--c-text-secondary);
}

/* --- Request preview, styled after the homepage hero terminal --- */
.api-preview {
    background: #0D1117;
    border: 1px solid var(--c-panel-dark-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(0,0,0,0.22), 0 2px 10px rgba(0,0,0,0.10);
    overflow: hidden;
}

.api-preview-bar {
    background: #161B22;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-preview-name {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255,255,255,0.42);
}

.api-preview-body {
    padding: 18px 20px 20px;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.7;
    overflow-x: auto;
}

.api-preview-req {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 14px;
    margin-bottom: 14px;
}

.api-preview-method { color: #34D399; font-weight: 700; }
.api-preview-path { color: #93C5FD; }
.api-preview-src { color: #FCA5A5; font-weight: 700; }
/* Wraps as one unit on narrow screens rather than splitting mid-parameter. */
.api-preview-query { color: rgba(255,255,255,0.46); white-space: nowrap; }

.api-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,0.46);
    white-space: nowrap;
}

.api-preview-ok { color: #34D399; font-weight: 600; }

.api-preview-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28C840;
    flex-shrink: 0;
}

.aj { display: grid; gap: 5px; }
.aj-line { white-space: pre; color: #E5E7EB; }

/* API response syntax highlighting. Four surfaces render a JSON response in
   these colours: the homepage hero terminal, the register and about page
   terminals, and the API bridge preview. Each used to carry its own copy and
   they had already drifted (register had .jb/.jp at 0.2, the others at 0.22),
   so the values live here once. The short names are the original markup
   convention across all four. */
.jk { color: #ABB2BF; }
.js { color: #FCD34D; }
.jn { color: #F59E0B; }
.jb,
.jp { color: rgba(255,255,255,0.22); }
.jn-hl { color: #FCD34D; font-weight: 700; }

.aj-line--hl {
    background: linear-gradient(90deg, rgba(88,166,255,0.12), rgba(88,166,255,0));
    border-left: 2px solid rgba(88,166,255,0.6);
    margin-left: -10px;
    padding-left: 8px;
    border-radius: 2px;
}


@media (max-width: 1024px) {
    .api-bridge-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Prompt block (copyable AI prompt) */
.prompt-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 16px;
    margin-bottom: 32px;
    padding: 14px 18px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 10px;
}

.prompt-block-label {
    width: 100%;
    font-size: 13px;
    color: var(--c-text-secondary);
}

.prompt-block-text {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-text);
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .terminal-body {
        padding: 16px;
    }
}

@media (max-width: 600px) {
    .terminal-body {
        overflow-x: auto;
    }

    .terminal-line--response {
        padding-left: 8px;
    }
}

/* ==========================================================================
   Homepage - Products
   ========================================================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* .product-card extends .card — full card is an <a> link */
.product-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

/* Only :hover needs this: a:hover (0,1,1) outranks .product-card (0,1,0).
   :focus-visible and :visited are already covered by the base rule. */
.product-card:hover {
    color: inherit;
}

/* Per-product colors */
.product-card[data-product="stockalert"]  { --pc-fg: #215bd8; --pc-soft-bg: rgba(33, 91, 216, 0.07); --pc-soft-border: rgba(33, 91, 216, 0.22); }
.product-card[data-product="reddit"]      { --pc-fg: #c96a1a; }
.product-card[data-product="news"]        { --pc-fg: #18794e; }
.product-card[data-product="x"]           { --pc-fg: #2a2a2a; }
.product-card[data-product="polymarket"]  { --pc-fg: #2f5bda; }
.product-card[data-product="crypto"]      { --pc-fg: #a66b00; }
.product-card[data-product="cli"]         { --pc-fg: #1f1f1f; }
.product-card[data-product="lslint"]      { --pc-fg: #2d6a3e; --pc-soft-bg: rgba(45, 106, 62, 0.07); --pc-soft-border: rgba(45, 106, 62, 0.22); }

.product-card--external {
    background:
        radial-gradient(circle at top right, var(--pc-soft-bg, rgba(26, 26, 26, 0.04)), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 248, 0.98));
    border-color: var(--pc-soft-border, var(--c-border));
}

.product-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
}

.product-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pc-fg, var(--c-accent-gold));
    flex-shrink: 0;
}

/* Watermark icon — top right */
.product-card-watermark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 100px;
    height: 100px;
    opacity: 0.07;
    pointer-events: none;
    color: var(--pc-fg);
    fill: var(--pc-fg);
}
.product-card-watermark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.product-card h3 {
    margin: 0;
}

.product-card p { color: var(--c-text-secondary); font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.product-card ul {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

.product-card li {
    position: relative;
    padding: 8px 0 8px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text-secondary);
    border-bottom: 1px solid var(--c-border-light);
}
.product-card li:last-child { border-bottom: none; }

.product-card li::before {
    content: "-";
    position: absolute;
    top: 8px;
    left: 0;
    color: var(--c-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.product-card-cta { color: var(--c-text); font-weight: 500; font-size: 15px; margin-top: auto; display: flex; align-items: center; gap: 6px; }
.product-card-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s; }
.product-card:hover .product-card-cta svg { transform: translateX(4px); }

/* ==========================================================================
   Homepage - About
   ========================================================================== */

section#about {
    padding-top: 48px;
    overflow: hidden;
}

.about-header {
    position: relative;
    z-index: 0;
    max-width: 640px;
    margin-bottom: 56px;
}

.about-coins {
    position: absolute;
    right: -420px;
    top: 55%;
    transform: translateY(-45%);
    pointer-events: none;
    z-index: -1;
}

.about-mark-wrap {
    width: 308px;
}

.about-mark {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.07));
    overflow: visible;
}

.about-mark-layer {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1), transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--mark-i) * 0.13s);
}

/* Layer separation is built into the plate geometry: each lower plate is carved so
   the plate above nests into it, pixel-identical to the canonical mark
   (adanos-mark-color.svg). To show complete plates during the build-up, each lower
   layer also carries a full (un-carved) plate copy that is visible while the layer
   animates in and fades out once it settles, revealing the exact carved gap. */
.about-mark-full {
    opacity: 1;
    transition: opacity 0.2s ease-out;
    transition-delay: calc(var(--mark-i) * 0.13s + 0.15s);
}

section#about.in-view .about-mark-layer {
    opacity: 1;
    transform: translateY(0);
}

section#about.in-view .about-mark-full {
    opacity: 0;
}

.about-header h2 { margin-bottom: 32px; }

.about-lead {
    font-size: 20px;
    line-height: 1.7;
    color: var(--c-text-secondary);
}

.about-header .about-lead + .about-lead {
    margin-top: 16px;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 0;
}

.about-highlight {
    border-radius: var(--radius-md);
}

.about-highlight h3 {
    margin-bottom: 10px;
}

.about-highlight p {
    font-size: 15px;
    color: var(--c-text-secondary);
    line-height: 1.6;
}

.customer-logos-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 32px 24px;
}

.customer-logos-grid li {
    height: 100px;
}

.customer-logos-grid img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.48;
    transition: opacity 0.25s ease;
}

.customer-logos-grid img[data-brand="harvard"] { max-height: 56px; }
.customer-logos-grid img[data-brand="alibaba"] { max-height: 28px; }
.customer-logos-grid img[data-brand="mit"] { max-height: 52px; }
.customer-logos-grid img[data-brand="columbia"] { max-height: 56px; }

.customer-logos-grid img:hover {
    opacity: 0.85;
}

@media (max-width: 1024px) {
    .customer-logos-grid { gap: 28px 20px; }
    .customer-logos-grid img { max-height: 36px; }
    .customer-logos-grid img[data-brand="harvard"] { max-height: 44px; }
    .customer-logos-grid img[data-brand="alibaba"] { max-height: 22px; }
    .customer-logos-grid img[data-brand="mit"] { max-height: 40px; }
    .customer-logos-grid img[data-brand="columbia"] { max-height: 44px; }
}

@media (max-width: 768px) {
    .customer-logos-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        scrollbar-width: none;
    }
    .customer-logos-grid::-webkit-scrollbar { display: none; }
    .customer-logos-grid li {
        flex: 0 0 140px;
        scroll-snap-align: start;
    }
    .customer-logos-grid img { max-height: 32px; }
    .customer-logos-grid img[data-brand="harvard"] { max-height: 40px; }
    .customer-logos-grid img[data-brand="alibaba"] { max-height: 20px; }
    .customer-logos-grid img[data-brand="mit"] { max-height: 36px; }
    .customer-logos-grid img[data-brand="columbia"] { max-height: 36px; }
}

/* ==========================================================================
   Sentiment Pages - Hero (Reddit & X)
   ========================================================================== */

.page-sentiment .hero {
    padding: 160px 48px 80px;
    min-height: auto;
    overflow: hidden;
}

.hero-logo {
    position: absolute;
    right: 0;
    top: 60%;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    opacity: 0.7;
    z-index: 2;
}

.page-x .hero-logo { opacity: 1; }

.hero-logo--cli {
    fill: var(--c-muted);
    opacity: 0.12;
}

/* Explicitly restates the shared scale. Redundant against the base h1 rule,
   but pinned by tests/hero-heading-size.test.mjs so the hero cannot drift. */
.page-sentiment .hero h1 {
    font-size: var(--h1-page-desktop-size);
    margin-bottom: 24px;
}

.page-top100.page-sentiment .hero h1 {
    font-size: clamp(36px, 4.8vw, 58px);
}

.page-sentiment .hero p {
    max-width: 600px;
    margin-bottom: 32px;
}

.hero-ticker {
    position: absolute;
    bottom: 0;
    left: 48px;
    right: 500px;
    overflow: hidden;
    z-index: 1;
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.hero-ticker-content {
    display: flex;
    gap: 48px;
    animation: heroTicker 25s linear infinite;
    width: max-content;
}

.ticker-logo {
    width: 52px;
    min-width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: var(--radius);
}

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

.page-sentiment section { padding: 48px; }
.page-sentiment section#trending { padding-bottom: 24px; }
.page-sentiment section h2 { margin-bottom: 16px; }
.page-sentiment section > p { max-width: none; }

/* ==========================================================================
   Trending Table (all sentiment + ranking pages)
   ========================================================================== */

/* .trending-section extends .card */
.trending-section {
    border-radius: var(--radius-xl);
    padding: 48px;
    overflow-x: clip;
}

.trending-header {
    margin-bottom: 20px;
}

.trending-updated {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--c-muted);
}

.trending-updated:empty {
    display: none;
}

.trending-header h2 { margin-bottom: 0; }

/* Trending Controls Container */
.trending-controls {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.trending-controls--single-period {
    justify-content: flex-end;
}

/* Trending Filter Tabs */
.trending-filter {
    display: flex;
    gap: 8px;
}

.trending-filter-btn {
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    background: var(--c-bg);
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.trending-filter-btn:hover {
    color: var(--c-text);
    border-color: var(--c-border-medium);
}

.trending-filter-btn.active {
    background: var(--c-text);
    color: var(--c-white);
    border-color: var(--c-text);
}

/* Trending Period Dropdown */
.trending-period {
    gap: 8px;
}

.trending-period-label {
    font-size: 13px;
    font-weight: 500;
}

.trending-period select {
    padding: 8px 32px 8px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    background: var(--c-bg);
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.trending-period select:hover {
    background-color: var(--field-bg);
    border-color: var(--c-border-medium);
}

.trending-period select:focus {
    outline: none;
    border-color: var(--c-text);
}

.trending-hint {
    color: var(--c-text-secondary);
    font-size: 15px;
    margin: 24px 0 0;
}

.stock-table { width: 100%; border-collapse: collapse; font-size: 15px; }

.stock-table th {
    text-align: left;
    font-size: 13px;
    color: var(--c-muted);
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
}

.stock-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border-light);
}

.stock-table tbody tr:nth-child(even) { background: var(--c-bg); }
.stock-table tbody tr:hover { background: var(--c-bg-hover); }
.stock-table tbody tr:last-child td { border-bottom: none; }

/* Table Status States */
.table-status {
    text-align: center;
    padding: 48px;
    color: var(--c-light);
}

.table-skeleton-row td {
    pointer-events: none;
}

.table-skeleton-cell {
    position: relative;
}

.table-skeleton {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(100deg, #efefef 20%, #f7f7f7 40%, #efefef 60%);
    background-size: 240% 100%;
    animation: tableSkeletonShimmer 1.25s ease-in-out infinite;
}

.table-skeleton--col-1 { width: 18px; }
.table-skeleton--col-2 { width: 56px; }
.table-skeleton--col-3 { width: min(180px, 85%); }
.table-skeleton--col-4 { width: 60px; }
.table-skeleton--col-5 { width: min(140px, 84%); }
.table-skeleton--col-5-reddit { width: min(132px, 82%); }
.table-skeleton--col-5-polymarket { width: min(148px, 86%); }
.table-skeleton--col-5-x { width: 72px; }
.table-skeleton--col-6 { width: min(132px, 88%); }
.table-skeleton--col-6-value { width: 42px; }
.table-skeleton--col-6-bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}
/* Must match the real sparkline exactly. Otherwise swapping the skeleton for
   live rows changes row height and shifts the column. Both read the tokens. */
.table-skeleton--col-7 {
    width: var(--sparkline-w);
    height: var(--sparkline-h);
    border-radius: var(--radius);
}
.table-skeleton--col-generic { width: 80%; }

.table-skeleton-sentiment .bar-container {
    background: transparent;
}

.table-skeleton-row:nth-child(2n) .table-skeleton--col-3 { width: min(140px, 70%); }

@keyframes tableSkeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}


.table-status--error {
    color: var(--c-red);
}

.stock-table .rank { color: var(--c-light); width: 40px; }
.stock-table .table-logo,
.stock-table .table-logo-fallback {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    vertical-align: middle;
}
.stock-table .table-logo,
.pm-odds-head .table-logo {
    object-fit: contain;
}
.stock-table .table-logo-fallback,
.pm-odds-head .table-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 37, 37, 0.12);
    background: #f3f0ea;
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}
/* Underlined because sentiment tables open a ticker overlay on click. The ticker database has no
   overlay and opts out in stocks.css; there only rows with a stock page are clickable. */
.stock-table .ticker {
    font-weight: 400;
    color: var(--c-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.stock-table .ticker:hover { color: var(--c-text-secondary); }
.stock-table .ticker--skeleton {
    cursor: default;
    text-decoration: none;
    pointer-events: none;
}

/* A ranking row's company cell keeps its plain look until hover, so a table of
   100 linked rows still reads as data rather than as a wall of links. */
.stock-table .company-link {
    color: inherit;
    text-decoration: none;
}

.stock-table .company-link:hover,
.stock-table .company-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--c-text);
}

.stock-table .company { color: var(--c-text-secondary); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-table .buzz { white-space: nowrap; }
.stock-table .buzz .trend-indicator { font-size: 13px; margin-left: 2px; position: relative; top: -1px; }
/* Keep "557 (26 subs)" on one line; tighter tablet widths were wrapping it,
   which made the whole row taller. */
.stock-table .mentions { white-space: nowrap; }
.stock-table .mentions-subs { color: var(--c-muted); }

/* Table Header Tooltips: extends shared .has-tooltip positioning */
.stock-table th.has-tooltip::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 140px;
}

/* State Colors - Consolidated */
.sentiment-value.positive,
.trend-indicator.up,
.trending-tag--up { color: var(--c-green); }

.sentiment-value.negative,
.trend-indicator.down,
.trending-tag--down { color: var(--c-red); }

.sentiment-value.neutral,
.trend-indicator.flat,
.trending-tag--empty { color: var(--c-light); }

.bar-fill.positive { background: var(--c-green); }
.bar-fill.negative { background: var(--c-red); }
.bar-fill.neutral { background: var(--c-light); }

.sentiment-bar { gap: 12px; }
.sentiment-value { font-weight: 400; min-width: 45px; }

.bar-container {
    flex: 1;
    height: 6px;
    background: var(--c-border-light);
    border-radius: 3px;
    overflow: hidden;
    max-width: 120px;
}

.bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

/* Diverging sentiment bar (all sentiment/ranking tables). Red grows left and
   green grows right of centre; the grey remainder is the neutral share. No
   number, just the bar (same on mobile, only narrower). */
.sentiment-net { display: flex; align-items: center; gap: 12px; }
.sentiment-net-track {
    position: relative;
    flex: 1;
    height: 10px;
    /* min-width forces the column to claim real width; without it the flex
       item collapses in the table auto-layout and the fills become slivers. */
    min-width: 96px;
    max-width: 144px;
    border-radius: 5px;
    overflow: hidden;
    /* The light track shows through wherever there is no fill, and that
       remainder equals the neutral share (100 - bullish - bearish). */
    background: var(--c-border-light);
}
.sentiment-net-pos { position: absolute; left: 50%; top: 0; height: 100%; background: var(--c-green); border-radius: 0 5px 5px 0; }
.sentiment-net-neg { position: absolute; right: 50%; top: 0; height: 100%; background: var(--c-red); border-radius: 5px 0 0 5px; }
.sentiment-net-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--c-border-medium); }

/* Hover/tap breakdown tooltip on the cell (bullish / neutral / bearish),
   positioned below and centred like the column-header tooltips. */
.sentiment-net.has-tooltip::after,
.pm-thin.has-tooltip::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    max-width: 240px;
}

.trend-indicator { font-size: 16px; font-weight: 600; }

/* Sparkline Charts */
.sparkline-cell {
    text-align: left;
    vertical-align: middle;
}

/* 80x32 keeps the 60x24 viewBox's 2.5 aspect (no stretch) while being taller. */
.sparkline {
    display: block;
    width: var(--sparkline-w);
    height: var(--sparkline-h);
}

/* Wrapper carries the hover/tap tooltip listing the daily values (the SVG
   can't host a ::after). Tooltip is right-aligned so it stays inside the
   table on this rightmost column. */
/* vertical-align middle drops the inline-block baseline gap that otherwise
   padded the row taller than its content. */
.sparkline-wrap { position: relative; display: inline-block; vertical-align: middle; }
.sparkline-wrap.has-tooltip::after,
.pm-mood.has-tooltip::after {
    top: 100%;
    right: 0;
    left: auto;
    transform: none;
    margin-top: 6px;
    /* Caps the width so a 14/30-day series wraps onto a few lines instead of
       one very long row; a 7-day series still fits on one line. */
    max-width: 300px;
}

.sparkline-empty {
    color: var(--c-muted);
    font-size: 15px;
}

/* ==========================================================================
   Trending Tags (Sectors & Countries)
   ========================================================================== */

.trending-tags {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trending-tags-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trending-tags-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 90px;
    color: var(--c-text-secondary);
}

.trending-tags-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.trending-tags-scroll::-webkit-scrollbar { display: none; }

.trending-tag {
    display: inline-flex;
    gap: 6px;
    padding: 6px 12px;
    background: var(--c-bg);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.trending-tag-flag {
    width: 16px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.trending-tag-icon {
    flex-shrink: 0;
}

.trending-tag-icon svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.trending-tag-score {
    font-size: 13px;
    color: var(--c-light);
    margin-left: 4px;
}

/* ==========================================================================
   API Documentation (5 sentiment pages; .method / .pill--pro also on /pricing)
   ========================================================================== */

.docs-section {
    background: var(--c-text);
    color: var(--c-white);
    max-width: none;
    padding: 48px;
}

.docs-inner {
    max-width: calc(var(--max-width) - 96px);
    margin: 0 auto;
}

.docs-section .section-label { color: var(--c-light); }
.docs-section h2 { color: var(--c-white); }
.docs-section > .docs-inner > p { color: var(--c-muted); margin-bottom: 32px; }
.docs-section > .docs-inner > p a { color: var(--c-white); }
.docs-section > .docs-inner > p a:hover { color: var(--c-light); }
.docs-section > .docs-inner > p code {
    background: rgba(255,255,255,0.1);
}

.docs-section .section-label + h2 {
    margin-top: 0;
}

.docs-section h2 + p + .docs-info {
    margin-top: 32px;
}

.docs-info + .section-label {
    margin-top: 48px;
}

.docs-info-item .card-icon {
    background: rgba(255,255,255,0.1);
    margin-bottom: 16px;
}

.docs-info-item .card-icon svg {
    stroke: var(--c-white);
}

/* Docs Info Grid */
.docs-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--c-panel-dark-bg);
    border: 1px solid var(--c-panel-dark-border);
    border-radius: var(--radius);
}

.docs-info-item h4 {
    color: var(--c-light);
    margin-bottom: 8px;
    font-weight: 500;
}

.docs-info-item code {
    color: var(--c-white);
}

.docs-info-item span {
    font-size: 13px;
    color: var(--c-white);
}

/* Endpoint Selector */
.endpoint-selector {
    margin-bottom: 24px;
}

.endpoint-selector label {
    display: block;
    color: var(--c-light);
    margin-bottom: 8px;
}

.endpoint-selector select {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    padding-right: 40px;
    font-size: 15px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    color: var(--c-white);
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.endpoint-selector select:hover,
.endpoint-selector select:focus {
    border-color: rgba(255,255,255,0.3);
    outline: none;
}

/* The border alpha bump alone is ~2.4:1 against the panel and identical to
   :hover, so keyboard users got no usable focus signal. */
.endpoint-selector select:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
}

/* Endpoints */
.endpoint {
    display: none;
    padding: 32px;
    background: var(--c-panel-dark-bg);
    border: 1px solid var(--c-panel-dark-border);
    border-radius: var(--radius-lg);
}

.endpoint.active { display: block; }

.endpoint-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.endpoint-header code {
    font-size: 20px;
    color: var(--c-white);
}

.method {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}

.method.get { background: var(--c-green); color: var(--c-white); }

.pill--pro {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--c-accent-gold);
    color: var(--c-white);
    margin-left: 8px;
    vertical-align: middle;
}

.endpoint-desc {
    color: var(--c-light);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.endpoint-desc:last-child {
    margin-bottom: 0;
}

.endpoint h4 {
    color: var(--c-light);
    margin: 24px 0 12px;
    font-weight: 500;
}

.endpoint h4:first-of-type { margin-top: 0; }

/* Params Table */
.params-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.params-table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: top;
}

.params-table tr:last-child td {
    border-bottom: none;
}

.params-table td:first-child {
    width: 25%;
    color: var(--c-white);
}

.params-table td:last-child { color: var(--c-light); }

.params-table code {
    font-size: 13px;
    background: rgba(255,255,255,0.08);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--c-border-light);
}

/* Code Blocks */
.endpoint pre {
    background: var(--c-code-block);
    border-radius: var(--radius);
    padding: 16px 20px;
    overflow-x: auto;
    margin-bottom: 8px;
}

.endpoint pre code {
    font-size: 13px;
    color: var(--c-code-text);
    line-height: 1.6;
}

/* ==========================================================================
   Forms (contact, register, key, analyzer, market movers, non-profit)
   No sentiment page renders anything in this section.
   ========================================================================== */

.api-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* .api-form-card extends .card .card--padded */
.api-form-card { scroll-margin-top: 100px; }
.api-form-card h3 {
    margin-bottom: 8px;
}
.api-form-card > p { color: var(--c-text-secondary); font-size: 15px; margin-bottom: 24px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--field-padding-y) var(--field-padding-x);
    background: var(--field-bg);
    border: 1px solid var(--field-border-color);
    border-radius: var(--field-radius);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s;
}

.form-group select {
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--field-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    color: var(--c-text);
    cursor: pointer;
}

.form-checkbox {
    margin-bottom: 24px;
}

.form-checkbox label.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-text-secondary);
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.checkbox-label span {
    line-height: 1.4;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--field-border-color-focus); }

.form-submit { width: 100%; margin-top: 8px; }

.form-group textarea {
    width: 100%;
    padding: var(--field-padding-y) var(--field-padding-x);
    background: var(--field-bg);
    border: 1px solid var(--field-border-color);
    border-radius: var(--field-radius);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s, background-color 0.2s;
    resize: vertical;
    min-height: 80px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--field-placeholder-color);
}

.form-error {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--c-error-bg);
    border: 1px solid var(--c-error-border);
    border-radius: var(--radius);
    color: var(--c-error-text);
    font-size: 15px;
}

.api-success {
    text-align: center;
    padding: 24px 0;
}
.api-success .card-icon {
    margin: 0 auto 16px;
}
.api-success h4 {
    font-size: 20px;
    margin-bottom: 8px;
}
/* ==========================================================================
   Contact Features (in contact section, site-wide)
   ========================================================================== */

/* .contact-features - horizontal layout variant */
.contact-features {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.contact-features li {
    color: var(--c-white);
    font-size: 15px;
    border-bottom: none;
}

.contact-features li::before {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--c-success);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ==========================================================================
   FAQ (site-wide: 38 pages incl. pricing, about, blog and insights)
   ========================================================================== */

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* .faq-item extends .card .card--padded */

.faq-item h3 {
    margin-bottom: 12px;
}
.faq-item p { color: var(--c-text-secondary); font-size: 15px; line-height: 1.7; }
.faq-item .definition-source { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--c-muted); }

.faq-item code {
    background: var(--c-bg-hover);
    color: var(--c-text);
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */

/* minmax(0, 1fr), not 1fr: plain `1fr` means minmax(auto, 1fr), which floors
   every track at its content's min-content width. That floor made the grid
   wider than the viewport between 769px and 815px (the 1-column collapse only
   fires at 768px), pushing the third card off-screen with no scrollbar to
   reach it, because body sets overflow-x: hidden. */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* .pricing-card extends .card .card--padded-sm */
.pricing-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card.pricing-card--popular {
    border: 1px solid var(--c-text);
    box-shadow: var(--shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--c-text);
    color: var(--c-white);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    white-space: nowrap;
    z-index: 1;
}

.pricing-header {
    margin-bottom: 16px;
}

.pricing-header h3 {
    margin-bottom: 8px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.price-amount {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.price-period {
    font-size: 15px;
    color: var(--c-muted);
}

.price-footnote {
    display: inline-block;
    margin-left: 1px;
}

.price-footnote::after {
    bottom: calc(100% + 8px);
    left: 50%;
    max-width: 280px;
    transform: translateX(-50%);
}

/* ==========================================================================
   Billing period switch (Monthly / Yearly) + price variants
   Scope ends at the CTA swap below; the shared .pricing-card internals that
   follow are used by every page with a pricing grid, not just /pricing.
   ========================================================================== */

.billing-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.billing-switch {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 5px;
    margin: 36px auto 44px;
    padding: 5px;
    background: var(--c-white);
    border: 1px solid var(--c-border-medium);
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

.billing-switch-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 28px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text-secondary);
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.billing-switch-option:hover {
    color: var(--c-text);
}

#billing-monthly:checked ~ .billing-switch label[for="billing-monthly"],
#billing-yearly:checked ~ .billing-switch label[for="billing-yearly"] {
    background: var(--c-text);
    color: var(--c-white);
}

.billing-switch-input:focus-visible ~ .billing-switch {
    outline: 2px solid var(--c-text);
    outline-offset: 3px;
}

.billing-switch-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-white);
    background: var(--c-green);
    padding: 4px 9px;
    border-radius: 100px;
    line-height: 1;
}

.billing-switch-badge-short {
    display: none;
}

/* Every plan uses the same stacked price block with a fixed height, so the
   amount, supporting line and the cards below all sit on a shared baseline in
   both billing modes (and the toggle never shifts the layout). */
.page-pricing .pricing-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 74px;
}

.page-pricing .price-amount {
    line-height: 1;
}

.price-variant--monthly,
.price-variant--yearly {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.price-variant--yearly {
    display: none;
}

#billing-yearly:checked ~ .pricing-grid .price-variant--monthly {
    display: none;
}

#billing-yearly:checked ~ .pricing-grid .price-variant--yearly {
    display: flex;
}

.price-decimals {
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: 0;
}

.price-suffix {
    margin-left: 5px;
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--c-muted);
}

/* Yearly sub-line: muted annual total + a green savings pill, on one row */
.price-sub {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.price-billed {
    font-size: 15px;
    color: var(--c-muted);
}

.price-save-pill {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--c-green);
    background: rgba(46, 125, 50, 0.12);
    padding: 4px 11px;
    border-radius: 100px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Tax asterisk now rides on the price itself, so keep it small and raised */
.page-pricing .price-footnote {
    font-size: 0.42em;
    font-weight: 600;
    vertical-align: super;
    margin-left: 2px;
    color: var(--c-muted);
}

/* Monthly view teases the yearly saving; clicking it flips the billing switch */
.price-teaser {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-green);
    cursor: pointer;
}

.price-teaser svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s;
}

.price-teaser:hover {
    text-decoration: underline;
}

.price-teaser:hover svg {
    transform: translateX(2px);
}

/* CTA sits directly under the plan description. A min-height on the description
   keeps the button on a shared row across all three cards. */
.page-pricing .pricing-card > .pricing-desc {
    min-height: 66px;
    margin-bottom: 18px;
}

.page-pricing .pricing-card > .pricing-btn {
    margin-bottom: 24px;
}

/* Repeated CTA at the very bottom of the card needs no trailing gap */
.page-pricing .pricing-card > .pricing-btn--repeat {
    margin-top: 4px;
    margin-bottom: 0;
}

/* CTA buttons swap with the billing switch.
   The .pricing-card prefix raises specificity above the later `.pricing-btn`
   base rule, otherwise both CTAs would render in monthly mode. */
.pricing-card .pricing-btn--yearly {
    display: none;
}

#billing-yearly:checked ~ .pricing-grid .pricing-card .pricing-btn--monthly {
    display: none;
}

#billing-yearly:checked ~ .pricing-grid .pricing-card .pricing-btn--yearly {
    display: flex;
}

/* ==========================================================================
   Pricing card internals
   .pricing-desc and .pricing-features are shared; everything from
   .pricing-card-section down is /pricing plus the non-profit page only.
   ========================================================================== */

.pricing-desc {
    color: var(--c-text-secondary);
    font-size: 15px;
    margin-bottom: 16px;
}

.pricing-desc:last-child {
    margin-bottom: 0;
}

/* .pricing-features extends .feature-list */
.pricing-features {
    margin: 0 0 24px;
    flex: 1;
}

.pricing-note {
    font-size: 13px;
    color: var(--c-text-secondary);
    text-align: center;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--c-bg);
    border-radius: var(--radius);
}

.pricing-btn {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    margin-inline: auto;
}

/* Structured card sections */
.pricing-card-section {
    margin-bottom: 16px;
}

.pricing-card-section:last-of-type {
    margin-bottom: 20px;
}

.pricing-card-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-secondary);
    padding: 6px 10px;
    background: var(--c-bg);
    border-radius: 6px;
    margin-bottom: 2px;
    list-style: none;
}

.pricing-card-section-title::-webkit-details-marker {
    display: none;
}

.pricing-card-collapse summary.pricing-card-section-title {
    cursor: pointer;
    position: relative;
    padding-right: 28px;
}

.pricing-card-collapse summary.pricing-card-section-title::after {
    content: "+";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 400;
    color: var(--c-muted);
}

.pricing-card-collapse[open] summary.pricing-card-section-title::after {
    content: "\2212";
}

.pricing-card-list {
    margin: 0;
}

.pricing-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border-light);
}

.pricing-card-row:last-child {
    border-bottom: none;
}

.pricing-card-row--stacked {
    flex-wrap: wrap;
    gap: 0;
    position: relative;
}

.pricing-card-dd-tree {
    width: 100%;
}

.pricing-card-count {
    position: absolute;
    top: 8px;
    right: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
}

.pricing-card-sublist {
    list-style: none;
    margin: 6px 0 0 4px;
    padding: 0;
}

.pricing-card-sublist li {
    font-size: 13px;
    font-weight: 400;
    color: var(--c-text-secondary);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 1px;
}

/* Vertical line segment on each item (except last goes only to center) */
.pricing-card-sublist li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid var(--c-border-medium);
}

.pricing-card-sublist li:last-child::after {
    bottom: 50%;
    border-bottom: 1px solid var(--c-border-medium);
    border-bottom-left-radius: var(--radius, 8px);
    width: 8px;
}

/* Horizontal line from vertical to text */
.pricing-card-sublist li::before {
    content: "";
    flex: 1;
    border-top: 1px solid var(--c-border-medium);
    min-width: 8px;
}

.pricing-card-sublist li:last-child::before {
    margin-left: 7px;
}

.pricing-card-row dt,
.pricing-card-row dd {
    margin: 0;
}

.pricing-card-row dt {
    font-size: 15px;
    color: var(--c-text-secondary);
}

.pricing-card-row dd {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.pricing-card-row .compare-icon {
    width: 18px;
    height: 18px;
}

.pricing-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 600;
}

.pricing-card-status .compare-icon {
    width: 15px;
    height: 15px;
}

.pricing-card-status .compare-icon--no {
    opacity: 0.7;
}

/* Pricing row tooltips: extends shared .has-tooltip positioning */
.pricing-card-row .has-tooltip {
    text-decoration: underline dotted var(--c-muted);
    text-underline-offset: 3px;
}

.pricing-card-row .has-tooltip::after {
    bottom: calc(100% + 8px);
    left: 0;
    max-width: 220px;
}

/* .pricing-callout extends .card */
.pricing-callout {
    margin: 32px 0 0;
    padding: 20px 32px;
    justify-content: center;
    gap: 16px;
}

.pricing-callout .card-icon { margin-bottom: 0; }

.pricing-callout p { margin: 0; color: var(--c-text-secondary); }

/* ==========================================================================
   Pricing Page
   ========================================================================== */

.hero-wrapper--auto { min-height: auto; }
.hero-wrapper--auto > section { position: relative; z-index: 10; }
/* The homepage hero is vertically centred in the viewport, so its "Real-time..."
   label drifts down on taller windows. Track that so "Sentiment API Pricing"
   sits at the same height; the floor is tuned to the homepage's resting position
   so the label never ends up above it (which read as "too close to the nav"). */
.page-pricing #pricing { padding-top: 102px; }
.page-pricing #pricing > .section-label { text-align: center; margin-bottom: 12px; }

@media (min-width: 1101px) {
    .page-pricing #pricing { padding-top: max(102px, calc(50vh - 425px)); }
}
.pricing-hero {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.page-pricing #pricing h1 {
    font-size: var(--h1-page-desktop-size);
    margin-bottom: 24px;
}

.pricing-lead {
    font-size: 20px;
    color: var(--c-text-secondary);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

/* Shared .page-pricing components used by the non-profit & education access page */
.pricing-section-head {
    max-width: 960px;
}

.pricing-section-head h2 {
    font-size: 32px;
    margin-bottom: 12px;
}

.pricing-section-head p {
    margin-bottom: 0;
    max-width: none;
    white-space: nowrap;
}

.page-pricing .pricing-grid {
    align-items: stretch;
}

.page-pricing .pricing-card {
    min-height: 100%;
    box-shadow: var(--shadow-sm);
}

/* Compare icons (reused in pricing cards) */
.compare-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-icon--yes { stroke: var(--c-green); }
.compare-icon--no { stroke: var(--c-muted); opacity: 0.4; }

/* ==========================================================================
   Tablet Styles
   ========================================================================== */

@media (max-width: 1024px) {

    .hero-logo { opacity: 0.08; }
    .hero-ticker { right: 200px; }

    .about-coins { right: -320px; opacity: 0.5; }

    /* Stock table - optimize for tablet. Tighter horizontal cell padding and a
       narrower (already truncated) Company column so all 7 columns + the taller
       sparkline fit portrait tablets without the table overflowing/clipping. */
    .stock-table th, .stock-table td { padding: 12px 10px; }
    .stock-table .company { max-width: 100px; }
}

/* Portrait tablets (iPad/iPad Air/Pro): all 7 columns plus the taller sparkline
   are too wide once "(N subs)" forces the Mentions column to ~150px. Drop the
   sub-count here (kept on landscape/desktop) so nothing clips or wraps. */
@media (max-width: 920px) {
    .stock-table .mentions-subs { display: none; }
}

/* ==========================================================================
   Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --subpage-grid-top: 66px;
        --subpage-grid-height: 520px;
        --sparkline-w: 60px;
        --sparkline-h: 24px;
    }

    .m-hidden { display: none; }

    /* Nav */
    nav { padding: 17px 20px; }
    .logo img {
        width: 105px;
        height: 30px;
        transform: none;
    }
    .nav-btn { padding: 6px 12px; font-size: 13px; }
    .nav-left .nav-dropdown { display: none; }
    .nav-right { display: none; }
    .nav-mobile-toggle { display: flex; }

    /* General */
    section { padding: 32px 20px; }
    section h2 { font-size: 24px; margin-bottom: 24px; }
    .section-label,
    .live-indicator { margin-bottom: 8px; }

    /* Homepage Hero */
    .hero-grid { top: 66px; }
    .hero { padding: 60px 20px 80px; }
    .hero-wrapper { min-height: auto; }
    .hero-wrapper .hero {
        min-height: auto;
        padding: 112px 20px 24px;
    }
    h1 { font-size: var(--h1-mobile-size); }
    .hero h1 { margin-bottom: 18px; }
    .hero p { font-size: 17px; margin-bottom: 0; }
    .hero-wrapper .hero p { margin-bottom: 8px; }
    /* Flow the live counter as one sentence on mobile. As a flex row its spans
       and text became separate items that wrapped component-by-component
       ("13,580" / "MENTIONS ACROSS" / …); block + inline-block dot lets the
       whole line wrap word-by-word instead. */
    .live-indicator { display: block; font-size: 13px; white-space: normal; max-width: 100%; }
    .live-indicator .pulse-dot { display: inline-block; margin-left: 6px; vertical-align: middle; }
    .hero-cta {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: calc(100vw - 40px);
    }
    .hero-cta .btn { text-align: center; width: 100%; font-size: 14px; padding: 14px 12px; }
    .hero-wrapper .hero-cta { margin-top: 0; }
    /* Products */
    .products-grid { grid-template-columns: 1fr; gap: 16px; }
    .product-card { padding: 20px; }
    .product-card h3 { font-size: 20px; }
    .product-card ul { margin-bottom: 12px; }
    .product-card li { padding: 6px 0 6px 16px; font-size: 13px; }
    .product-card li::before { top: 6px; left: 0; font-size: 13px; }


    /* About */
    section#about { padding-top: 32px; }
    .about-header { margin-bottom: 32px; }
    .about-coins { right: -20px; opacity: 0.25; }
    .about-mark-wrap { width: 260px; }
    .about-lead { font-size: 17px; }
    .about-header .about-lead + .about-lead { margin-top: 12px; }
    .about-highlights { grid-template-columns: 1fr; gap: 16px; margin-bottom: 0; }
    .about-highlight { padding: 24px; }
    .about-highlight h3 { font-size: 20px; }
    /* Contact */
    .contact-section { width: calc(100% - 40px); margin: 0 auto 40px; padding: 28px 20px; border-radius: var(--radius-md); }
    .contact-section p { margin-bottom: 16px; font-size: 15px; }
    .contact-section a { font-size: 15px; }

    /* Footer */
    footer { padding: 32px 20px 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-heading { margin-bottom: 8px; font-size: 13px; }
    .footer-col p { margin: 3px 0; font-size: 13px; }
    .footer-bottom { padding-top: 16px; font-size: 13px; }

    /* Sentiment Pages (Reddit & X) */
    .page-sentiment .hero { padding: 120px 20px 80px; }
    /* Analyzer page: no trending table after the hero, so match the regular section rhythm */
    .page-analyzer .hero { padding-bottom: 32px; }
    .hero-logo, .page-x .hero-logo { width: 280px; height: 280px; right: -40px; top: 40%; opacity: 0.08; }
    .hero-ticker { bottom: 0; left: 20px; right: 0; }
    .ticker-logo { width: 48px; min-width: 48px; height: 48px; }
    .page-sentiment .hero h1 { font-size: var(--h1-mobile-size); }
    .page-top100.page-sentiment .hero h1 { font-size: var(--h1-mobile-size); }
    .page-sentiment .hero p { font-size: 17px; }
    /* 3-column grid keeps all three stats on one row (flex-wrap broke them 2+1
       once the labels grew to the 13px floor); labels wrap within a cell when
       needed instead of pushing a stat onto its own line. */
    .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
    .hero-stat h3 { font-size: 20px; }
    .page-sentiment .stack-section { padding-bottom: 40px; }
    .page-sentiment section { padding: 32px 20px; }
    .page-sentiment section h2 { font-size: 24px; line-height: 1.2; }
    .page-sentiment .trending-header h2 { font-size: 24px; }
    .trending-header { margin-bottom: 16px; }
    .trending-controls { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
    .trending-filter { margin-bottom: 0; }
    .trending-period-label { display: none; }

    /* Tooltip positioning fix for mobile - keep tooltips in viewport */
    .stock-table th.has-tooltip::after {
        max-width: 160px;
    }
    /* Left columns (Buzz, Mentions) - expand tooltip to the right */
    .stock-table th:nth-child(4).has-tooltip::after,
    .stock-table th:nth-child(5).has-tooltip::after {
        left: 0;
        right: auto;
        transform: none;
    }
    /* Right columns (Bullish, Trend) - expand tooltip to the left */
    .stock-table th:nth-child(6).has-tooltip::after,
    .stock-table th:nth-child(7).has-tooltip::after {
        left: auto;
        right: 0;
        transform: none;
    }
    /* Data-row tooltips live in the rightmost columns, so a centered tooltip
       overflows the viewport on phones. Right-align them and cap the width.
       The right edge is anchored ~40px from the viewport (section 20px +
       trending-section 20px padding), so cap at 100vw - 52px (40px offset +
       12px left safety margin) to guarantee no left-edge overflow. */
    .sentiment-net.has-tooltip::after,
    .pm-thin.has-tooltip::after,
    .sparkline-wrap.has-tooltip::after,
    .pm-mood.has-tooltip::after {
        left: auto;
        right: 0;
        transform: none;
        max-width: min(260px, calc(100vw - 52px));
    }
    /* On /pricing the footnote marker sits at the left of the card (after
       "$290/yr"), so the centered tooltip overflows the left edge. Left-anchor
       it to the marker and cap the width. The 130px is the marker's approximate
       inset from the viewport (page + card padding + the "$290/yr" price
       width), so marker.x + max-width stays within the viewport. Scoped to
       .page-pricing: on the sentiment pages the marker sits mid-card
       ("per month*") where the centered base tooltip already fits. */
    .page-pricing .price-footnote::after {
        left: 0;
        right: auto;
        transform: none;
        max-width: min(260px, calc(100vw - 130px));
    }

    .trending-section { padding: 20px; border-radius: var(--radius-lg); }
    .stock-table { font-size: 13px; }
    .stock-table th, .stock-table td { padding: 12px 6px; }
    .stock-table th:nth-child(3), .stock-table td:nth-child(3) { display: none; } /* Hide Company */
    .stock-table .bar-container { display: none; }
    /* Mobile: keep the diverging bar usable. The 7-column table is wider than a
       phone, so hide the cramped Trend sparkline (already clipped here) to give
       the sentiment bar room. */
    .stock-table th:nth-child(7), .stock-table td:nth-child(7) { display: none; }
    /* Fixed width (no flex-grow) so the bar can't stretch the table past the
       phone viewport; the other columns absorb the slack instead. */
    .stock-table .sentiment-net-track { flex: none; width: 80px; min-width: 0; }
    .stock-table .rank { width: 24px; }
    .stock-table td:nth-child(5) { text-align: center; } /* Center mentions column content on mobile */
    .sentiment-bar { gap: 0; }
    /* The sparkline (col 7) is hidden here, so a live row's height comes from its
       text line. Pad the thin skeleton bars with transparent vertical margin so
       skeleton rows match that height and don't jump when data replaces them. */
    .table-skeleton-row .table-skeleton { margin-top: 4.5px; margin-bottom: 4.5px; }
    .sentiment-value { min-width: 40px; }

    .api-section { grid-template-columns: 1fr; gap: 20px; }
    .api-form-card { padding: 20px; }

    .faq-grid { grid-template-columns: 1fr; gap: 16px; }
    .faq-item { padding: 20px; }

    .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
    /* Mobile card order: Hobby, Professional, Free (default DOM order is Free, Hobby, Professional) */
    .pricing-grid > .pricing-card:nth-child(1) { order: 3; }
    .pricing-grid > .pricing-card:nth-child(2) { order: 1; }
    .pricing-grid > .pricing-card:nth-child(3) { order: 2; }
    .page-pricing .pricing-grid { align-items: start; }
    .page-pricing .pricing-card { min-height: auto; }
    .pricing-card { padding: 24px; }
    .price-amount { font-size: 32px; }
    .page-pricing .pricing-price { min-height: 66px; }
    /* Cards stack on mobile, so no cross-card alignment height is needed */
    .page-pricing .pricing-card > .pricing-desc { min-height: 0; margin-bottom: 16px; }
    .page-pricing .pricing-card > .pricing-btn { margin-bottom: 20px; }

    /* Keep the switch at its natural width so the savings badge never clips */
    .billing-switch { margin-bottom: 24px; }
    .billing-switch-option { padding: 9px 16px; }
    .pricing-callout {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        margin: 24px 0 0;
        gap: 12px;
    }
    .pricing-callout p { font-size: 15px; }

    .page-pricing #pricing { padding-top: 108px; }
    /* Left-align the pricing hero (eyebrow, h1, lead) on mobile, matching the
       homepage hero. */
    .page-pricing #pricing > .section-label { text-align: left; }
    .pricing-hero { margin-bottom: 0; padding-bottom: 0; text-align: left; }
    .page-pricing #pricing h1 { font-size: var(--h1-mobile-size); margin-bottom: 16px; }
    .pricing-lead { font-size: 17px; margin-bottom: 0; }
    .pricing-section-head h2 { font-size: 24px; margin-bottom: 10px; }
    .pricing-section-head p { white-space: normal; }

    .contact-features { flex-direction: column; gap: 4px; align-items: center; }

    .docs-section { padding: 32px 20px; }
    .docs-inner { max-width: none; }
    .docs-info { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
    .docs-info-item code, .docs-info-item span { font-size: 13px; }
    .endpoint-selector select { max-width: 100%; }
    .endpoint { padding: 20px; }
    .endpoint-header code { font-size: 15px; }
    .endpoint pre { padding: 16px; }
    .endpoint pre code { font-size: 13px; }
    .params-table td { padding: 8px; }
    /* Stack each param onto its own block. */
    .page-sentiment .params-table td { display: block; padding: 4px 8px; border-bottom: none; }
    .page-sentiment .params-table td:first-child { width: auto; padding-top: 10px; }
    .page-sentiment .params-table td:last-child { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }

    /* Differs from the base mobile rule in padding and radius only. */
    .page-sentiment .contact-section { padding: 32px 20px; border-radius: var(--radius-lg); }

}

/* ==========================================================================
   Extra Small Mobile Styles (< 480px)
   ========================================================================== */

@media (max-width: 480px) {
    :root {
        --sparkline-w: 50px;
        --sparkline-h: 20px;
    }

    /* The base URL is one unbreakable token and overflowed the viewport by up
       to 45px here. `anywhere` (not `break-word`) is required because only it
       shrinks min-content, which is what the 1fr column sizes against. Scoped
       to this breakpoint: at wider widths it would break the URL mid-word even
       though it fits. */
    .docs-info-item code { overflow-wrap: anywhere; word-break: break-all; }

    .about-coins {
        display: block;
        right: -116px;
        top: 92px;
        transform: none;
        opacity: 0.16;
    }
    .about-mark-wrap { width: 220px; }

    /* Stock table - tighter spacing for very small screens */
    .stock-table th, .stock-table td { padding: 10px 4px; }
    .stock-table .rank { width: 20px; }
    .sentiment-value { min-width: 36px; }

    /* Billing switch: keep both segments and the savings badge on one line */
    .billing-switch-option { padding: 10px 12px; font-size: 14px; gap: 6px; }
    .billing-switch-badge { font-size: 10px; padding: 3px 7px; }
}

@media (max-width: 360px) {
    /* On very narrow phones the long badge would overflow, so use a compact one */
    .billing-switch-badge-full { display: none; }
    .billing-switch-badge-short { display: inline; }
}

/* ==========================================================================
   Ticker Explanation Overlay
   ========================================================================== */

.ticker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.ticker-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ticker-overlay-card {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2); /* unique size, keep as is */
    max-width: 560px;
    max-height: calc(100vh - 40px);
    width: 100%;
    padding: 32px;
    position: relative;
    transform: translateY(8px);
    transition: transform 0.2s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ticker-overlay.active .ticker-overlay-card {
    transform: translateY(0);
}

.ticker-overlay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 10;
}

.ticker-overlay-close:hover {
    background: var(--c-white);
}

.ticker-overlay-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--c-muted);
}

.ticker-overlay-header {
    display: none;
}

.ticker-overlay-chart {
    height: 320px;
    margin: -32px -32px 20px;
    border-bottom: 1px solid var(--c-border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--c-bg);
    overflow: hidden;
}

.ticker-overlay-chart .tradingview-widget-container,
.ticker-overlay-chart .tradingview-widget-container__widget,
.ticker-overlay-chart .tradingview-widget-container__widget > div {
    height: 100% !important;
    width: 100% !important;
}

.ticker-overlay-chart .tradingview-widget-copyright {
    display: none !important;
}

.ticker-overlay-chart-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--c-muted);
    font-size: 15px;
}

.ticker-overlay-content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-text-secondary);
}

.ticker-overlay-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ticker-overlay-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-text-secondary);
    font-size: 15px;
}

.ticker-overlay-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-border);
    border-top-color: var(--c-text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.ticker-overlay-stats {
    margin: 20px -32px 0;
    padding: 16px 32px 0;
    border-top: 1px solid var(--c-border-light);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.ticker-overlay-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ticker-overlay-stat .stat-label {
    font-size: 13px;
    color: var(--c-text-secondary);
}

.ticker-overlay-stat .stat-value {
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text);
}

.ticker-overlay-stat .stat-value.trend-up { color: var(--c-green); }
.ticker-overlay-stat .stat-value.trend-down { color: var(--c-red); }
.ticker-overlay-stat .stat-value.trend-flat { color: var(--c-muted); }

/* The deep-dive link shares the section-label row rather than taking one of its own, which keeps
   the overlay exactly as tall as it was without the link. */
.ticker-overlay-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Taken over from the h4 this now wraps, so the spacing below the row is unchanged. */
    margin-bottom: 8px;
}

.ticker-overlay-content-head .ticker-overlay-title {
    margin-bottom: 0;
}

/* The label and the link use different fonts, so at a shared line-height the link's leading would
   grow the row. line-height 1 keeps its line box inside the label's. */
.ticker-overlay-deep-dive {
    flex: none;
    line-height: 1;
}

/* Colour and underline come from the base `a` rule; only these differ. */
.ticker-overlay-deep-dive-link {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-underline-offset: 2px;
}

.ticker-overlay-deep-dive-link:hover {
    color: var(--c-text-secondary);
}

/* ==========================================================================
   Polymarket pages: thin sentiment (both Polymarket pages), market pulse strip
   and live odds board (/polymarket-top-50-stocks)
   ========================================================================== */

/* Hairline dividers come from the 1px gap over the border-coloured grid. */
.pm-market-pulse {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 8px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    /* Inner cell radius = outer radius minus the 1px border. */
    --pm-cell-radius: calc(var(--radius-md) - 1px);
}

.pm-market-pulse-note {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--c-muted);
}

/* space-between keeps the values on one line across a row when a label wraps. */
.pm-market-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: 14px 16px;
    background: var(--c-white);
}

.pm-market-stat:first-child { border-radius: var(--pm-cell-radius) 0 0 var(--pm-cell-radius); }
.pm-market-stat:last-child { border-radius: 0 var(--pm-cell-radius) var(--pm-cell-radius) 0; }

.pm-market-stat .has-tooltip { align-self: flex-start; }
.pm-market-stat .has-tooltip::after {
    top: 100%;
    left: 0;
    margin-top: 6px;
    max-width: 240px;
}

.pm-market-stat-value {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text);
}

.pm-market-stat-spark .sparkline { width: 48px; height: 20px; }

/* "Thin" replaces the sentiment bar when one market or under $1K liquidity
   makes the bullish/bearish split meaningless. Dashed = incomplete. */
/* line-height 16px + 1px borders keeps the pill inside the row's text line box,
   so thin rows are exactly as tall as rows with a bar on phones. */
.pm-thin {
    display: inline-block;
    padding: 0 10px;
    border: 1px dashed var(--c-border-medium);
    font-size: 13px;
    line-height: 16px;
    color: var(--c-muted);
}

/* Live odds board: one card per stock with its two most contested markets. */
.pm-odds-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pm-odds-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.pm-odds-card--loading { min-height: 240px; }

.pm-odds-empty {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 15px;
    color: var(--c-muted);
}

.pm-odds-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Brand tile beside the ticker; the fallback tile look comes from the ranking-table rule. */
.pm-odds-head .table-logo,
.pm-odds-head .table-logo-fallback {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
}

/* Pure-black hairline so white logos keep their edge on the white card. */
.pm-odds-head .table-logo {
    outline: 1px solid oklch(0 0 0 / 0.1);
    outline-offset: -1px;
}

.pm-odds-ticker {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
}

.pm-odds-company {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--c-muted);
}

.pm-mood {
    flex: none;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-secondary);
    background: var(--c-bg);
}

.pm-mood--bullish { color: var(--c-green); background: color-mix(in srgb, var(--c-green) 10%, transparent); }
.pm-mood--bearish { color: var(--c-red); background: color-mix(in srgb, var(--c-red) 10%, transparent); }

.pm-odds-markets {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-odds-market {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
}

/* Polymarket questions run long ("close at $365-$370 on the final day of
   trading of the week of ..."); two lines, full text in the title. */
.pm-odds-q {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.45;
    color: var(--c-text);
}

/* .bar-container track at full width. Neutral fill: a Yes can be bullish or
   bearish depending on the question. */
.pm-odds-bar { max-width: none; }
.pm-odds-bar .bar-fill { background: var(--c-logo-graphite); }

.pm-odds-pct {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
}

.pm-odds-pct small {
    font-size: 13px;
    font-weight: 400;
    color: var(--c-muted);
}

.pm-odds-meta {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--c-muted);
}

/* Two fixed rows (quality line, Insights link) so the divider sits at the same
   height on every card in a row, even when one of them is missing. */
.pm-odds-foot {
    display: grid;
    grid-template-rows: 20px 20px;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border-light);
    font-size: 13px;
    line-height: 20px;
}

.pm-odds-quality {
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-muted);
}

/* Link styling comes from .ticker-overlay-deep-dive-link. */
.pm-odds-source {
    grid-row: 2;
    justify-self: start;
}

@media (max-width: 1024px) {
    .pm-odds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .pm-market-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-market-stat:first-child { border-radius: var(--pm-cell-radius) 0 0 0; }
    .pm-market-stat:nth-child(2) { border-radius: 0 var(--pm-cell-radius) 0 0; }
    .pm-market-stat:nth-child(3) { border-radius: 0 0 0 var(--pm-cell-radius); }
    .pm-market-stat:last-child { border-radius: 0 0 var(--pm-cell-radius) 0; }
    /* Right column of the 2x2 grid: open the label tooltip leftwards so it stays on screen. */
    .pm-market-stat:nth-child(even) .label.has-tooltip::after {
        left: auto;
        right: 0;
        max-width: min(240px, calc(100vw - 52px));
    }
    .pm-market-stat-value { font-size: 16px; }
    /* Twelve stacked cards would be a very long scroll on a phone: swipe row
       instead, bleeding to the screen edges, with the next card peeking in. */
    .pm-odds-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        margin: 0 -20px;
        padding: 0 20px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        scrollbar-width: none;
    }
    .pm-odds-grid::-webkit-scrollbar { display: none; }
    .pm-odds-card { scroll-snap-align: start; }
}

/* ==========================================================================
   Pricing - API Endpoints Tabs
   ========================================================================== */

#endpoints > p { max-width: none; }

.api-tabs {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.api-tabs-bar {
    display: flex;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
    overflow-x: auto;
}

.api-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.api-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.api-tab:hover { color: var(--c-text); }

.api-tab-panel { display: none; padding: 32px; }

.api-tab-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.api-tab-panel-head h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.api-tab-panel > p {
    font-size: 15px;
    color: var(--c-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.api-endpoint-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--c-border-light);
}

.api-endpoint-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: center;
    gap: 24px;
    min-height: 64px;
    padding: 16px 0;
    border-bottom: 1px solid var(--c-border-light);
}

.api-endpoint-row:last-child { border-bottom: none; }

.api-endpoint-meta {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.api-endpoint-meta code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-text);
    background: var(--c-bg);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Re-skins the base .pill--pro to match .method in this row. */
.api-endpoint-meta .pill--pro {
    margin-left: 0;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0;
}

.api-method-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.api-method-stack .method,
.api-method-stack .pill--pro {
    text-align: center;
}

.api-endpoint-desc {
    font-size: 15px;
    color: var(--c-text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .api-endpoint-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 8px;
    }
}

#ep-tab-reddit-stock:checked ~ .api-tabs-bar label[for="ep-tab-reddit-stock"],
#ep-tab-reddit-crypto:checked ~ .api-tabs-bar label[for="ep-tab-reddit-crypto"],
#ep-tab-x:checked ~ .api-tabs-bar label[for="ep-tab-x"],
#ep-tab-news:checked ~ .api-tabs-bar label[for="ep-tab-news"],
#ep-tab-poly:checked ~ .api-tabs-bar label[for="ep-tab-poly"] {
    color: var(--c-text);
    border-bottom-color: var(--c-accent-gold);
    background: var(--c-white);
}

#ep-tab-reddit-stock:focus-visible ~ .api-tabs-bar label[for="ep-tab-reddit-stock"],
#ep-tab-reddit-crypto:focus-visible ~ .api-tabs-bar label[for="ep-tab-reddit-crypto"],
#ep-tab-x:focus-visible ~ .api-tabs-bar label[for="ep-tab-x"],
#ep-tab-news:focus-visible ~ .api-tabs-bar label[for="ep-tab-news"],
#ep-tab-poly:focus-visible ~ .api-tabs-bar label[for="ep-tab-poly"] {
    outline: 2px solid var(--c-text);
    outline-offset: -2px;
}

#ep-tab-reddit-stock:checked ~ #ep-panel-reddit-stock,
#ep-tab-reddit-crypto:checked ~ #ep-panel-reddit-crypto,
#ep-tab-x:checked ~ #ep-panel-x,
#ep-tab-news:checked ~ #ep-panel-news,
#ep-tab-poly:checked ~ #ep-panel-poly {
    display: block;
}

/* ==========================================================================
   Reduced motion
   Must stay LAST: these overrides carry no extra specificity, so they only
   win against a base rule that appears earlier in the file.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .table-skeleton {
        animation: none;
        background: #efefef;
    }

    .api-tab {
        transition: none;
    }

    .ticker-overlay-spinner {
        animation: none;
    }

    .hero-ticker-content,
    .pulse-dot {
        animation: none;
    }

    .hero-grid-highlight {
        animation: none;
        opacity: 0;
    }

    .about-mark-layer,
    section#about.in-view .about-mark-layer {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .about-mark-full {
        opacity: 0;
        transition: none;
    }
}