:root {
    --bg: #061426;
    --bg2: #081b31;
    --card: #0b223b;
    --card2: #071c32;
    --line: #24415d;
    --text: #f5f8ff;
    --muted: #a9bad1;
    --blue: #11bdfa;
    --blue2: #1688ff;
    --green: #58e36b;
    --gold: #ffc43b;
    --red: #ff605a;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    --radius: 18px;
}

/* Force the public site to use the intended light theme. */
html, body { color-scheme: only light; }
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: #f8fbff;
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    font: inherit;
}
.shell {
    width: min(1500px, calc(100% - 48px));
    margin: auto;
}
.icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5, 16, 30, 0.98);
    border-bottom: 1px solid var(--line);
}
.nav-shell {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.brand {
    font-size: 25px;
    font-weight: 950;
    color: #fff;
    letter-spacing: -0.04em;
}
.brand em {
    font-style: normal;
    color: var(--blue);
}
.main-nav {
    display: flex;
    gap: 30px;
    margin-left: auto;
}
.main-nav a {
    font-size: 13px;
    font-weight: 850;
    color: #dbe8f5;
    padding: 20px 0 17px;
    border-bottom: 2px solid transparent;
}
.main-nav a.active {
    color: var(--blue);
    border-color: var(--blue);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.trusted {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dbe8f5;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}
.trusted .icon {
    width: 17px;
}
.nav-cta,
.btn.primary {
    background: linear-gradient(135deg, #0ed1ff, #1688ff);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 25px rgba(17, 189, 250, 0.18);
}
.nav-cta {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
}
.btn.ghost {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    background: transparent;
}
.menu-button {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
}
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    color: #cde0f4;
    cursor: pointer;
}
.theme-switch .icon {
    width: 17px;
    height: 17px;
}
.switch-track {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: #10345d;
    position: relative;
    border: 1px solid #2b587e;
}
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17, 189, 250, 0.2);
    transition: 0.2s;
}
.dashboard-hero {
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--line);
}
.dashboard-hero.small {
    padding: 28px 0 18px;
}
.hero-board {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 42px;
    align-items: center;
}
.hero-copy h1 {
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    margin: 0 0 20px;
    color: #fff;
}
.hero-copy h1 span {
    display: block;
    color: var(--blue);
}
.hero-copy p {
    font-size: 17px;
    line-height: 1.55;
    color: #d5e1ef;
    max-width: 620px;
    margin: 0 0 23px;
}
.hero-checks {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 12px;
    color: #dbe8f5;
}
.hero-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}
.hero-checks .icon {
    color: var(--blue);
    width: 20px;
}
.hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.hero-analytics {
    display: grid;
    gap: 13px;
}
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}
.stats-row.wide {
    align-self: center;
}
.stat-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    min-height: 92px;
}
.stat-card .icon {
    color: var(--blue);
    width: 38px;
    height: 38px;
}
.stat-card b {
    display: block;
    font-size: 27px;
    line-height: 1;
    color: #fff;
}
.stat-card span {
    display: block;
    margin-top: 8px;
    color: #d7e4f1;
    font-size: 13px;
    line-height: 1.25;
}
.chart-panel,
.table-shell,
.panel-card,
.tab-box,
.side-picks article,
.cards-4 article,
.insight-row article,
.ga4-side,
.ga4-kpis > div,
.ga4-kpis article,
.ga4-code-grid article {
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.96), rgba(7, 26, 47, 0.96));
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.chart-panel {
    padding: 18px 22px;
}
.chart-panel h3,
.panel-title h2,
.cards-4 h3,
.insight-row h3,
.ga4-side h2,
.ga4-kpis h3,
.ga4-code-grid h3 {
    margin: 0;
    color: #fff;
}
.bar-chart {
    height: 150px;
    display: flex;
    align-items: end;
    gap: 16px;
    padding: 22px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.bar-chart div {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.bar-chart i {
    width: 100%;
    max-width: 28px;
    display: block;
    background: linear-gradient(180deg, #19d8ff, #1694df);
    border-radius: 3px 3px 0 0;
}
.bar-chart span {
    font-size: 12px;
    color: #d3e1f0;
}
.dash-section {
    padding: 12px 0 8px;
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}
.panel-title .icon {
    color: var(--gold);
    width: 26px;
    height: 26px;
}
.panel-title h2 {
    font-size: 22px;
    letter-spacing: -0.02em;
}
.table-shell {
    overflow: auto;
    padding: 10px;
}
.main-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1180px;
    font-size: 13px;
}
.main-table th {
    background: rgba(255, 255, 255, 0.035);
    color: #f3f8ff;
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}
.main-table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(76, 113, 146, 0.32);
    border-right: 1px solid rgba(76, 113, 146, 0.22);
    text-align: center;
    color: #fff;
}
.main-table tr:last-child td {
    border-bottom: 0;
}
.main-table td:first-child,
.main-table th:first-child {
    text-align: left;
}
.main-table.simple {
    min-width: 860px;
}
.featured td {
    background: rgba(17, 189, 250, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(17, 189, 250, 0.38),
        inset 0 -1px 0 rgba(17, 189, 250, 0.38);
}
.platform-name span {
    font-weight: 450;
    color: #0e2343 !important;
    font-size: 15px;
}
.pill {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
}
.pill.green {
    background: #0661c5;
    color: #ffffff;
}
.linkish {
    color: #0e2343 ;
    font-weight: 400;
}
.rate {
    font-size: 16px;
    font-weight: 450;
    color: #0e2343 !important;
}
.ok {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #22b74e;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}
.slots {
    color: #0e2343  !important;
    font-weight: 450;
    font-size: 17px;
}
.source-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
}
.source-icons .icon {
    width: 16px;
    height: 16px;
}
.social-dot {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1688ff;
    color: #fff;
    font-weight: 950;
    font-size: 12px;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}
.chips b {
    font-size: 11px;
    font-weight: 750;
    color: #d8f2ff;
    border: 1px solid #2e6c9b;
    background: #0b2947;
    border-radius: 4px;
    padding: 5px 8px;
}
.legend-line {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 14px;
    color: #d7e4f0;
    font-size: 12px;
}
.legend-line .icon {
    width: 17px;
}
.ga4-grid {
    display: grid;
    grid-template-columns: 0.32fr 0.68fr;
    gap: 22px;
}
.ga4-side {
    padding: 24px;
}
.ga4-side > .icon {
    width: 50px;
    height: 50px;
    color: var(--blue);
}
.ga4-side p {
    color: #d3dfed;
    line-height: 1.5;
}
.ga4-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}
.ga4-icons span {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 8px;
    min-height: 78px;
    background: rgba(17, 189, 250, 0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
}
.ga4-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.ga4-kpis > div,
.ga4-kpis article {
    padding: 16px;
}
.ga4-kpis small {
    color: #d3dfed;
}
.ga4-kpis b {
    display: block;
    font-size: 28px;
    margin: 6px 0;
}
.ga4-kpis em {
    color: #65ff77;
    font-style: normal;
    font-size: 12px;
}
.ga4-kpis article {
    grid-column: span 1;
}
.ga4-kpis article:first-of-type {
    grid-column: span 2;
}
.line-chart,
.small-line {
    width: 100%;
    height: auto;
}
.line-chart path:first-child,
.small-line path:first-child {
    stroke: #27425f;
}
.line-chart path:nth-child(2),
.small-line path:nth-child(2) {
    fill: none;
    stroke: #22ccff;
    stroke-width: 5;
    stroke-linecap: round;
}
.line-chart circle,
.small-line circle {
    fill: #22ccff;
}
.donut-box {
    display: flex;
    align-items: center;
    gap: 18px;
}
.donut {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}
.donut circle {
    fill: none;
    stroke: #122a47;
    stroke-width: 7;
}
.donut .seg {
    stroke-dasharray: 34 66;
    stroke-dashoffset: 0;
}
.donut .a {
    stroke: #1688ff;
}
.donut .b {
    stroke: #28c78f;
    stroke-dasharray: 28 72;
    stroke-dashoffset: -34;
}
.donut .c {
    stroke: #ffc43b;
    stroke-dasharray: 20 80;
    stroke-dashoffset: -62;
}
.donut-legend {
    display: grid;
    gap: 9px;
    font-size: 12px;
    color: #d7e3ef;
}
.donut-legend span {
    display: flex;
    gap: 8px;
    align-items: center;
}
.donut-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1688ff;
}
.donut-legend span:nth-child(2) i {
    background: #28c78f;
}
.donut-legend span:nth-child(3) i {
    background: #ffc43b;
}
.donut-legend span:nth-child(4) i {
    background: #ff743d;
}
.mini-bars {
    height: 80px;
    gap: 4px;
    border: 0;
    padding: 0;
}
.mini-bars i {
    max-width: 10px;
}
.big-number {
    font-size: 32px !important;
}
.cards-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 14px;
}
.cards-4 article {
    padding: 22px;
}
.cards-4 .icon {
    color: var(--blue);
    width: 42px;
    height: 42px;
}
.cards-4 ul {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #d6e4f2;
    line-height: 1.7;
}
.cards-4 p,
.insight-row p {
    color: #d7e2ef;
    line-height: 1.5;
    margin-bottom: 0;
}
.insight-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.insight-row.three {
    grid-template-columns: 1fr 1fr 1fr;
}
.insight-row article {
    padding: 17px;
}
.progress-list {
    display: grid;
    gap: 13px;
    color: #d8e6f5;
}
.progress-list i {
    display: block;
    height: 9px;
    background: linear-gradient(90deg, #1ccfff, #1688ff);
    border-radius: 99px;
    margin-top: 6px;
    width: var(--w);
}
.hero-rate {
    font-size: 38px;
    color: var(--blue);
}
.pricing-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: -20px;
}
.price-card {
    width: 180px;
    height: 140px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.main-price {
    display: grid;
    place-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #148cff, #0865df);
    transform: translateY(-8px);
    color: #fff;
}
.main-price .icon {
    width: 44px;
    height: 44px;
}
.main-price b {
    font-size: 18px;
}
.ghost-card {
    opacity: 0.45;
    transform: rotate(-4deg);
}
.tab-box {
    overflow: hidden;
}
.tab-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
}
.tab-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 19px 12px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}
.tab-nav button small {
    display: block;
    color: #aac0d8;
    font-size: 11px;
    font-weight: 700;
}
.tab-nav button.active {
    color: var(--blue);
    background: rgba(17, 189, 250, 0.07);
    box-shadow: inset 0 -2px 0 var(--blue);
}
.tab-panel {
    display: none;
    padding: 20px;
}
.tab-panel.active {
    display: block;
}
.tab-note {
    color: #d6e3f2;
    text-align: center;
    margin: 0 0 16px;
}
.pricing-note {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    color: #dce9f7;
}
.pricing-note .icon {
    color: var(--blue);
}
.manual-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 14px;
}
.side-picks {
    display: grid;
    gap: 12px;
}
.side-picks article {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px;
}
.side-picks .icon {
    width: 50px;
    height: 50px;
    color: var(--blue);
}
.side-picks h3 {
    margin: 0 0 8px;
}
.side-picks p {
    margin: 0;
    color: #d5e2f0;
}
.ga4-code-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.ga4-code-grid article {
    padding: 20px;
}
.ga4-code-grid pre {
    background: #020b15;
    border: 1px solid #1a3957;
    border-radius: 10px;
    color: #d9edff;
    padding: 14px;
    overflow: auto;
    font-size: 12px;
}
.ga4-code-grid ul {
    line-height: 1.9;
    color: #dce8f5;
}
.site-footer {
    padding: 16px 0 24px;
}
.footer-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.7), rgba(7, 26, 47, 0.7));
    overflow: hidden;
}
.footer-strip div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 14px;
    border-right: 1px solid var(--line);
}
.footer-strip div:last-child {
    border-right: 0;
}
.footer-strip .icon {
    color: var(--blue);
    width: 36px;
    height: 36px;
}
.footer-strip b {
    display: block;
    color: var(--blue);
    font-size: 15px;
}
.footer-strip small {
    display: block;
    color: #d7e3ef;
    margin-top: 3px;
}
.copyright {
    text-align: center;
    color: #8fa1b8;
    margin-top: 18px;
    font-size: 13px;
}
body[data-theme="light"] {
    --bg: #f7fbff;
    --bg2: #fff;
    --card: #fff;
    --card2: #fff;
    --line: #dfe8f3;
    --text: #0a1a34;
    --muted: #56687f;
    --blue: #087cff;
    --blue2: #0a71ee;
    --green: #16b84a;
    --shadow: 0 12px 36px rgba(30, 70, 120, 0.08);
    background: #f8fbff;
    color: var(--text);
}
body[data-theme="light"] .site-header {
    background: #fff;
    border-bottom-color: var(--line);
}
body[data-theme="light"] .brand {
    color: #071934;
}
body[data-theme="light"] .brand em {
    color: #0a9eff;
}
body[data-theme="light"] .main-nav a {
    color: #0e2343;
}
body[data-theme="light"] .trusted {
    color: #0e2343;
}
body[data-theme="light"] .theme-switch {
    background: #fff;
    border-color: #d6e5f5;
    color: #0e2343;
}
body[data-theme="light"] .switch-track {
    background: #e7f1ff;
    border-color: #bcd6f6;
}
body[data-theme="light"] .switch-thumb {
    left: 2px;
    background: #087cff;
}
body[data-theme="light"] .dashboard-hero {
    background: #fff;
    border-bottom-color: var(--line);
}
body[data-theme="light"] .hero-copy h1,
body[data-theme="light"] .stat-card b,
body[data-theme="light"] .chart-panel h3,
body[data-theme="light"] .panel-title h2,
body[data-theme="light"] .cards-4 h3,
body[data-theme="light"] .insight-row h3,
body[data-theme="light"] .ga4-side h2,
body[data-theme="light"] .ga4-kpis h3,
body[data-theme="light"] .ga4-code-grid h3 {
    color: #071934;
}
body[data-theme="light"] .hero-copy p,
body[data-theme="light"] .hero-checks,
body[data-theme="light"] .stat-card span,
body[data-theme="light"] .tab-note,
body[data-theme="light"] .pricing-note,
body[data-theme="light"] .cards-4 p,
body[data-theme="light"] .insight-row p,
body[data-theme="light"] .ga4-side p,
body[data-theme="light"] .side-picks p {
    color: #4c5f78;
}
body[data-theme="light"] .btn.ghost {
    color: #071934;
    border-color: #b6c8dd;
}
body[data-theme="light"] .stat-card,
body[data-theme="light"] .chart-panel,
body[data-theme="light"] .table-shell,
body[data-theme="light"] .tab-box,
body[data-theme="light"] .side-picks article,
body[data-theme="light"] .cards-4 article,
body[data-theme="light"] .insight-row article,
body[data-theme="light"] .ga4-side,
body[data-theme="light"] .ga4-kpis > div,
body[data-theme="light"] .ga4-kpis article,
body[data-theme="light"] .ga4-code-grid article,
body[data-theme="light"] .footer-strip {
    background: #fff;
    border-color: var(--line);
    box-shadow: var(--shadow);
}
body[data-theme="light"] .main-table th {
    background: #f8fbff;
    color: #0e2343;
    border-color: var(--line);
}
body[data-theme="light"] .main-table td {
    color: #0e2343;
    border-color: #e7eef7;
}
body[data-theme="light"] .featured td {
    background: #eef7ff !important;
}
body[data-theme="light"] .chips b {
    background: #eef7ff;
    border-color: #b8d7ff;
    color: #0e2343;
}
body[data-theme="light"] .legend-line,
body[data-theme="light"] .donut-legend,
body[data-theme="light"] .progress-list,
body[data-theme="light"] .ga4-code-grid ul {
    color: #31465f;
}
body[data-theme="light"] .social-dot {
    background: #087cff;
}
body[data-theme="light"] .code,
body[data-theme="light"] pre {
    background: #061426;
}
body[data-theme="light"] .footer-strip small,
body[data-theme="light"] .copyright {
    color: #4c5f78;
}
body[data-theme="light"] .bar-chart {
    border-bottom-color: #cfdbea;
}
body[data-theme="light"] .line-chart path:first-child,
body[data-theme="light"] .small-line path:first-child {
    stroke: #dce7f4;
}
@media (max-width: 1200px) {
    .hero-board,
    .ga4-grid,
    .manual-layout {
        grid-template-columns: 1fr;
    }
    .main-nav {
        display: none;
    }
    .nav-right {
        margin-left: auto;
    }
    .menu-button {
        display: block;
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .cards-4,
    .insight-row,
    .footer-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .ga4-kpis,
    .ga4-code-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ga4-kpis article:first-of-type {
        grid-column: span 1;
    }
}
@media (max-width: 720px) {
    .shell {
        width: min(100% - 24px, 1500px);
    }
    .nav-cta,
    .trusted {
        display: none;
    }
    .hero-copy h1 {
        font-size: 38px;
    }
    .stats-row,
    .cards-4,
    .insight-row,
    .insight-row.three,
    .footer-strip,
    .ga4-kpis,
    .ga4-code-grid,
    .tab-nav {
        grid-template-columns: 1fr;
    }
    .tab-nav button {
        justify-content: flex-start;
    }
    .btn {
        min-width: 0;
        width: 100%;
    }
    .hero-actions {
        display: grid;
    }
    .ga4-icons {
        grid-template-columns: 1fr 1fr;
    }
    .footer-strip div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .footer-strip div:last-child {
        border-bottom: 0;
    }
}

/* v11 membership pricing page update */
.price-hero {
    padding: 28px 0 18px;
}
.price-hero-board {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    gap: 34px;
    align-items: center;
}
.price-hero-copy h1 {
    font-size: clamp(40px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    margin: 0 0 16px;
}
.price-hero-copy h1 span {
    display: block;
    color: var(--blue);
}
.price-hero-copy p {
    font-size: 17px;
    color: #d5e1ef;
    line-height: 1.55;
    margin: 0 0 22px;
}
.value-stage {
    display: grid;
    grid-template-columns: 0.48fr 0.52fr;
    gap: 16px;
    align-items: stretch;
}
.value-chart-card {
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.96), rgba(7, 26, 47, 0.96));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow);
}
.chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: #f5f8ff;
}
.chart-title span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 950;
}
.chart-title .icon {
    width: 20px;
    color: var(--gold);
}
.chart-title small {
    color: #b9c9dc;
}
.value-svg {
    width: 100%;
    height: 210px;
}
.value-svg > path:first-child {
    fill: none;
    stroke: #24415d;
}
.value-svg .line {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.value-svg .line.free {
    stroke: #a7b5c5;
}
.value-svg .line.premium {
    stroke: #13c5ff;
}
.value-svg .line.business {
    stroke: #7ee23d;
}
.value-svg .axis text {
    fill: #b7c7d9;
    font-size: 13px;
}
.value-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #d7e4f1;
}
.value-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.free-dot {
    background: #a7b5c5;
}
.premium-dot {
    background: #13c5ff;
}
.business-dot {
    background: #7ee23d;
}
.plan-mini-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.plan-mini-row article {
    position: relative;
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.96), rgba(7, 26, 47, 0.96));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.plan-mini-row article.popular {
    border-color: #12bfff;
    box-shadow:
        0 0 0 1px rgba(18, 191, 255, 0.25),
        var(--shadow);
}
.plan-mini-row article.business {
    border-color: #5ed337;
    box-shadow:
        0 0 0 1px rgba(94, 211, 55, 0.25),
        var(--shadow);
}
.plan-mini-row em {
    position: absolute;
    right: 12px;
    top: 10px;
    font-style: normal;
    font-size: 10px;
    background: #1688ff;
    color: #fff;
    padding: 5px 8px;
    border-radius: 999px;
    font-weight: 900;
}
.plan-mini-row .business em {
    background: #58b72f;
}
.plan-mini-row b {
    display: block;
    color: var(--blue);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.plan-mini-row strong {
    display: block;
    font-size: 38px;
    margin: 12px 0 7px;
    color: #fff;
}
.plan-mini-row small {
    color: #d6e2ef;
    line-height: 1.45;
}
.plan-cards3 {
    display: grid;
    grid-template-columns: 0.9fr 1fr 1.1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.membership-card {
    position: relative;
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.96), rgba(7, 26, 47, 0.96));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow);
}
.membership-card.premium {
    border-color: #11bdfa;
}
.membership-card.business {
    border-color: #67dc38;
    background: linear-gradient(180deg, rgba(8, 50, 42, 0.96), rgba(7, 32, 42, 0.96));
}
.membership-card em {
    position: absolute;
    right: 14px;
    top: 12px;
    background: #1688ff;
    color: #fff;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    font-style: normal;
}
.membership-card.business em {
    background: #58b72f;
}
.plan-head span {
    display: block;
    color: #d1deee;
    font-size: 16px;
    font-weight: 950;
}
.plan-head b {
    display: inline-block;
    font-size: 39px;
    margin: 8px 5px 8px 0;
    color: #fff;
}
.plan-head small {
    color: #c2d1e4;
}
.membership-card ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}
.membership-card li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #e4eef9;
    font-size: 13px;
}
.membership-card li:before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #123d60;
    color: #12d4ff;
    font-size: 11px;
    font-weight: 950;
    flex: 0 0 auto;
}
.membership-card.business li:before {
    background: #163f2b;
    color: #84f250;
}
.compact-gap {
    margin-top: 14px;
}
.value-table td:first-child {
    font-weight: 850;
}
.value-table td {
    text-align: center;
}
body[data-theme="light"] .price-hero-copy h1 {
    color: #071934;
}
body[data-theme="light"] .price-hero-copy p {
    color: #4c5f78;
}
body[data-theme="light"] .value-chart-card,
body[data-theme="light"] .plan-mini-row article,
body[data-theme="light"] .membership-card {
    background: #fff;
    border-color: var(--line);
    box-shadow: var(--shadow);
}
body[data-theme="light"] .chart-title,
body[data-theme="light"] .plan-mini-row strong,
body[data-theme="light"] .plan-head b {
    color: #071934;
}
body[data-theme="light"] .chart-title small,
body[data-theme="light"] .plan-mini-row small,
body[data-theme="light"] .plan-head small,
body[data-theme="light"] .membership-card li {
    color: #4c5f78;
}
body[data-theme="light"] .value-svg > path:first-child {
    stroke: #dbe6f3;
}
body[data-theme="light"] .value-svg .axis text {
    fill: #60748f;
}
body[data-theme="light"] .value-legend {
    color: #31465f;
}
body[data-theme="light"] .plan-head span {
    color: #0e2343;
}
body[data-theme="light"] .membership-card.business {
    background: #f7fff3;
}
@media (max-width: 1200px) {
    .price-hero-board,
    .value-stage {
        grid-template-columns: 1fr;
    }
    .plan-cards3 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .plan-mini-row {
        grid-template-columns: 1fr;
    }
    .price-hero-copy h1 {
        font-size: 38px;
    }
    .value-svg {
        height: 170px;
    }
}

/* v12 pricing fairness update */
.price-hero-board {
    grid-template-columns: 0.3fr 0.7fr;
}
.value-stage.graph-only {
    display: block;
}
.value-stage.graph-only .value-chart-card {
    min-height: 360px;
}
.value-chart-large .value-svg {
    height: 270px;
}
.value-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.value-highlights span {
    display: block;
    text-align: center;
    border: 1px solid var(--line);
    background: rgba(17, 189, 250, 0.05);
    border-radius: 10px;
    padding: 10px 8px;
    color: #dceaf8;
    font-size: 12px;
}
.value-highlights b {
    display: block;
    color: var(--blue);
    font-size: 18px;
    margin-bottom: 3px;
}
.provider-switch {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 0 0 18px;
}
.provider-switch button {
    border: 1px solid var(--line);
    background: rgba(17, 189, 250, 0.04);
    color: #e8f4ff;
    border-radius: 10px;
    padding: 13px 10px;
    font-weight: 900;
    cursor: pointer;
}
.provider-switch button.active {
    border-color: var(--blue);
    background: rgba(17, 189, 250, 0.12);
    color: var(--blue);
    box-shadow: inset 0 -2px 0 var(--blue);
}
.provider-panel {
    display: none;
}
.provider-panel.active {
    display: block;
}
.plan-cards2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.membership-card.regular {
    min-height: 220px;
}
.membership-card .plan-head span {
    text-transform: none;
}
.membership-card li {
    line-height: 1.35;
}
.table-shell.compact-gap .main-table th,
.table-shell.compact-gap .main-table td {
    padding: 9px 10px;
}
.provider-panel .table-shell {
    box-shadow: none;
}
.provider-panel .main-table {
    min-width: 740px;
}
body[data-theme="light"] .provider-switch button {
    background: #fff;
    color: #16304f;
    border-color: #d9e7f4;
}
body[data-theme="light"] .provider-switch button.active {
    background: #ecf8ff;
    color: #087dba;
    border-color: #12bdfa;
}
body[data-theme="light"] .value-highlights span {
    background: #f4fbff;
    color: #31465f;
    border-color: #dbe6f3;
}
@media (max-width: 900px) {
    .provider-switch {
        grid-template-columns: 1fr 1fr;
    }
    .plan-cards2 {
        grid-template-columns: 1fr;
    }
    .value-highlights {
        grid-template-columns: 1fr;
    }
    .price-hero-board {
        grid-template-columns: 1fr;
    }
}

/* v13 fixed pricing tabs */
.v13-board {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    gap: 34px;
    align-items: center;
}
.v13-copy h1 {
    font-size: clamp(36px, 3.6vw, 56px);
}
.v13-graphic {
    min-height: 350px;
}
.value-card-main {
    height: 100%;
    min-height: 350px;
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.96), rgba(7, 26, 47, 0.96));
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px;
}
.value-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.value-card-head strong {
    display: block;
    color: #fff;
    font-size: 24px;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
.value-card-head b {
    color: var(--blue);
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 11px;
}
.mini-label {
    color: #9fdfff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
    font-size: 11px;
}
.value-body-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
}
.value-bars-v13 {
    height: 230px;
    display: flex;
    align-items: end;
    gap: 18px;
    padding: 18px 18px 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}
.value-bars-v13 div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: 100%;
}
.value-bars-v13 i {
    width: 100%;
    max-width: 46px;
    height: var(--h);
    display: block;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #18d8ff, #1385ff);
    box-shadow: 0 12px 25px rgba(17, 189, 250, 0.14);
}
.value-bars-v13 span {
    font-size: 12px;
    color: #d7e6f5;
    font-weight: 850;
}
.value-score-stack {
    display: grid;
    gap: 12px;
}
.value-score-stack article {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(17, 189, 250, 0.045);
    padding: 15px;
}
.value-score-stack span {
    color: #9fdfff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.value-score-stack b {
    display: block;
    color: #fff;
    font-size: 23px;
    margin: 6px 0 4px;
}
.value-score-stack small {
    color: #c5d7ea;
}
.value-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.value-cards-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    color: #dceaf8;
    font-size: 12px;
    font-weight: 850;
    background: rgba(255, 255, 255, 0.025);
}
.value-cards-row .icon {
    width: 17px;
    height: 17px;
    color: var(--blue);
}
.v13-tabs .tab-panel {
    display: none;
}
.v13-tabs .tab-panel.active {
    display: block;
}
.v13-tab-nav button {
    min-height: 64px;
}
.v13-plans {
    margin-bottom: 16px;
}
.three-package-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.three-package-table article {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(9, 36, 63, 0.96), rgba(7, 26, 47, 0.96));
    box-shadow: var(--shadow);
    padding: 18px;
}
.three-package-table article span {
    display: block;
    color: #9fdfff;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.three-package-table article b {
    display: block;
    color: #fff;
    font-size: 34px;
    letter-spacing: -0.03em;
    margin: 8px 0 2px;
}
.three-package-table article small {
    display: block;
    color: #c7d8e8;
    font-size: 13px;
    font-weight: 850;
}
.three-package-table article ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}
.three-package-table article li {
    color: #dce9f6;
    font-size: 13px;
    line-height: 1.35;
}
.three-package-table article li:before {
    content: "✓";
    color: var(--green);
    font-weight: 950;
    margin-right: 7px;
}
.three-package-table .featured-pack {
    border-color: rgba(17, 189, 250, 0.9);
    box-shadow: 0 18px 50px rgba(17, 189, 250, 0.18);
}
.three-package-table em {
    position: absolute;
    right: 14px;
    top: 14px;
    font-style: normal;
    color: #061426;
    background: linear-gradient(135deg, #0ed1ff, #4be6ff);
    font-size: 10px;
    font-weight: 950;
    border-radius: 999px;
    padding: 6px 8px;
}
.v13-compare th,
.v13-compare td {
    font-size: 13px;
    padding: 10px 11px;
}
.price-tabs .tab-nav button.active {
    background: rgba(17, 189, 250, 0.14) !important;
    color: var(--blue) !important;
}
.price-tabs [data-price-panel]:not(.active) {
    display: none !important;
}
.price-tabs [data-price-panel].active {
    display: block !important;
}
body[data-theme="light"] .value-card-main,
body[data-theme="light"] .three-package-table article {
    background: #fff;
    border-color: var(--line);
}
body[data-theme="light"] .value-card-head strong,
body[data-theme="light"] .value-score-stack b,
body[data-theme="light"] .three-package-table article b {
    color: #071934;
}
body[data-theme="light"] .value-bars-v13,
body[data-theme="light"] .value-score-stack article,
body[data-theme="light"] .value-cards-row span {
    background: #f7fbff;
    border-color: var(--line);
}
body[data-theme="light"] .value-bars-v13 span,
body[data-theme="light"] .value-score-stack small,
body[data-theme="light"] .value-cards-row span,
body[data-theme="light"] .three-package-table article li,
body[data-theme="light"] .three-package-table article small {
    color: #31465f;
}
@media (max-width: 1100px) {
    .v13-board,
    .value-body-grid {
        grid-template-columns: 1fr;
    }
    .value-cards-row,
    .three-package-table {
        grid-template-columns: 1fr;
    }
    .v13-graphic {
        min-height: auto;
    }
}
@media (max-width: 760px) {
    .v13-tab-nav {
        grid-template-columns: 1fr;
    }
    .v13-tab-nav button {
        justify-content: flex-start;
    }
    .provider-switch {
        grid-template-columns: 1fr 1fr;
    }
    .plan-cards3 {
        grid-template-columns: 1fr !important;
    }
}

/* v18 source traffic colors: white in dark mode, black in light mode */
.source-icons,
.legend-line {
    color: #ffffff !important;
}
.source-icons .icon,
.legend-line .icon {
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}
.source-icons .social-dot,
.legend-line .social-dot {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 14px !important;
    font-weight: 950 !important;
    opacity: 1 !important;
}
body[data-theme="light"] .source-icons,
body[data-theme="light"] .legend-line {
    color: #0661c5 !important;
}
body[data-theme="light"] .source-icons .icon,
body[data-theme="light"] .legend-line .icon {
    color: #0661c5 !important;
    stroke: #0661c5 !important;
    fill: none !important;
}
body[data-theme="light"] .source-icons .social-dot,
body[data-theme="light"] .legend-line .social-dot {
    color: #0661c5 !important;
    background: transparent !important;
}

/* v19 FINAL SOURCE ICON CONTRAST FIX
   Required behavior:
   - Dark mode: source icons and source legend are white
   - Light mode: source icons and source legend are black
   Applies to Home and Autosurf pages using body[data-theme]. */
body[data-theme="dark"] .source-icons,
body[data-theme="dark"] .source-icons *,
body[data-theme="dark"] .sources-cell,
body[data-theme="dark"] .sources-cell *,
body[data-theme="dark"] .legend-line,
body[data-theme="dark"] .legend-line *,
body[data-theme="dark"] .sources-legend,
body[data-theme="dark"] .sources-legend * {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
body[data-theme="dark"] .source-icons svg,
body[data-theme="dark"] .sources-cell svg,
body[data-theme="dark"] .legend-line svg,
body[data-theme="dark"] .sources-legend svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
}
body[data-theme="dark"] .source-icons .social-dot,
body[data-theme="dark"] .sources-cell .social-dot,
body[data-theme="dark"] .legend-line .social-dot,
body[data-theme="dark"] .sources-legend .social-dot {
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}
body[data-theme="light"] .source-icons,
body[data-theme="light"] .source-icons *,
body[data-theme="light"] .sources-cell,
body[data-theme="light"] .sources-cell *,
body[data-theme="light"] .legend-line,
body[data-theme="light"] .legend-line *,
body[data-theme="light"] .sources-legend,
body[data-theme="light"] .sources-legend * {
    color: #000000 !important;
    border-color: #000000 !important;
}
body[data-theme="light"] .source-icons svg,
body[data-theme="light"] .sources-cell svg,
body[data-theme="light"] .legend-line svg,
body[data-theme="light"] .sources-legend svg {
    color: #000000 !important;
    stroke: #000000 !important;
    fill: none !important;
    opacity: 1 !important;
}
body[data-theme="light"] .source-icons .social-dot,
body[data-theme="light"] .sources-cell .social-dot,
body[data-theme="light"] .legend-line .social-dot,
body[data-theme="light"] .sources-legend .social-dot {
    background: transparent !important;
    color: #087cff  !important;
    border: 0 !important;
    box-shadow: none !important;
}



/* v20 TABLE FOREGROUND MODE FIX
   Every table/card foreground text and icons:
   - Dark mode: white
   - Light mode: black
   This uses body[data-theme] because the site theme is stored on <body>. */
body[data-theme="dark"]
    :is(
        .table-shell,
        .table-card,
        .main-table,
        .data-table,
        .membership-table,
        .three-package-table,
        .plan-cards3,
        .plan-cards2,
        .plan-cards,
        .pack-card,
        .membership-card,
        .provider-panel,
        .tab-panel,
        .legend-line
    )
    :is(
        th,
        td,
        a,
        span,
        b,
        strong,
        small,
        em,
        i,
        li,
        p,
        h3,
        h4,
        button,
        .icon,
        .pill,
        .rate,
        .slots,
        .platform-name,
        .platform-name span,
        .linkish,
        .chips b,
        .ok,
        .x,
        .check,
        .source-icons,
        .source-icons *,
        .social-dot
    ),
body[data-theme="dark"]
    :is(
        .table-shell,
        .table-card,
        .main-table,
        .data-table,
        .membership-table,
        .three-package-table,
        .plan-cards3,
        .plan-cards2,
        .plan-cards,
        .pack-card,
        .membership-card,
        .provider-panel,
        .tab-panel,
        .legend-line
    ) {
    color: #ffffff !important;
}

/* v21 TABLE ICON SIZE +15%
   Scope: Autosurf comparison table only.
   - Source SVG icons: 16px -> 18.4px
   - Source social icon/check icons: 18px -> 20.7px
   - Any other table SVG icon: 22px -> 25.3px
*/
.main-table svg.icon {
    width: 25.3px !important;
    height: 25.3px !important;
}
.main-table .source-icons {
    gap: 11.5px !important;
}
.main-table .source-icons svg.icon {
    width: 18.4px !important;
    height: 18.4px !important;
}
.main-table .source-icons .social-dot {
    display: inline-grid !important;
    place-items: center !important;
    width: 20.7px !important;
    height: 20.7px !important;
    min-width: 20.7px !important;
    line-height: 20.7px !important;
    font-size: 13.8px !important;
}
.main-table .ok,
.main-table .check,
.main-table .x {
    display: inline-grid !important;
    place-items: center !important;
    width: 20.7px !important;
    height: 20.7px !important;
    min-width: 20.7px !important;
    line-height: 20.7px !important;
    font-size: 13.8px !important;
}



/* v22 SOURCE COLUMN ICONS +20%
   Scope: only the Sources icons inside the Autosurf comparison table.
   Keeps the existing colors and other table icon sizing unchanged. */
.main-table .source-icons {
    gap: 13.5px !important;
}
.main-table .source-icons svg.icon,
.main-table .source-icons .social-dot {
    transform: scale(1.2) !important;
    transform-origin: center center !important;
}


/* v23 SOURCE ICON TOOLTIPS
   Hover/focus tooltip labels for the Sources column and legend icons. */
.main-table .source-icons .source-tip,
.legend-line .source-tip {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: help !important;
    overflow: visible !important;
    outline: 0 !important;
}
.main-table .source-icons .source-tip::after,
.legend-line .source-tip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    z-index: 200;
    min-width: max-content;
    max-width: 210px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #061426 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.22);
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.main-table .source-icons .source-tip::before,
.legend-line .source-tip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    z-index: 201;
    border: 6px solid transparent;
    border-top-color: #061426 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.main-table .source-icons .source-tip:hover::after,
.main-table .source-icons .source-tip:focus-visible::after,
.main-table .source-icons .source-tip:hover::before,
.main-table .source-icons .source-tip:focus-visible::before,
.legend-line .source-tip:hover::after,
.legend-line .source-tip:focus-visible::after,
.legend-line .source-tip:hover::before,
.legend-line .source-tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
body[data-theme="light"] .main-table .source-icons .source-tip::after,
body[data-theme="light"] .legend-line .source-tip::after {
    background: #071934 !important;
    color: #ffffff !important;
    border-color: rgba(7,25,52,.18) !important;
}
body[data-theme="light"] .main-table .source-icons .source-tip::before,
body[data-theme="light"] .legend-line .source-tip::before {
    border-top-color: #071934 !important;
}

/* v24 SOURCE ICON MEANING UPDATE
   Sources column meanings:
   1) Hidden Referrer / Anonymous
   2) Social Referral Source (general all-social icon)
   3) Search
   4) Referral
   Search and Referral icons are intentionally kept unchanged. */
.main-table .source-icons .anonymous-source-icon,
.main-table .source-icons .social-source-icon {
    width: 18.4px !important;
    height: 18.4px !important;
}
.main-table .source-icons .source-tip[data-source-type="anonymous"]::after,
.main-table .source-icons .source-tip[data-source-type="social"]::after {
    min-width: max-content;
}
.legend-line {
    flex-wrap: wrap;
}
.legend-line .source-tip {
    margin-left: 2px;
}
.legend-line .anonymous-source-icon,
.legend-line .social-source-icon {
    width: 17px !important;
    height: 17px !important;
}

/* v25 TRUSTED SHIELD HEADER FIX */
.trusted .icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px;
    padding: 5px;
    border-radius: 50%;
    color: #0ed1ff !important;
    stroke: #0ed1ff !important;
    background: rgba(14, 209, 255, 0.08);
    border: 1px solid rgba(14, 209, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(14, 209, 255, 0.04);
}

body[data-theme="light"] .trusted .icon {
    color: #087cff !important;
    stroke: #087cff !important;
    background: #eef7ff;
    border-color: #b8d7ff;
    box-shadow: 0 0 0 3px rgba(8, 124, 255, 0.04);
}

/* ==========================================================
   PRICING PAGE CONTENT — scoped so shared header stays identical
   ========================================================== */
.pricing-content{
  color-scheme: light;
  --bg:#f6fbff;
  --bg2:#eef7ff;
  --panel:#ffffff;
  --panel2:#f3f9ff;
  --card:#ffffff;
  --card2:#f7fbff;
  --line:#d8e8f6;
  --line2:#c5dcf2;
  --text:#071833;
  --muted:#5e6d7f;
  --cyan:#20c8ff;
  --blue:#2197ff;
  --green:#58e45e;
  --purple:#9b5cff;
  --orange:#ff8126;
  --teal:#18d1c2;
  --white:#ffffff;
  --shadow:0 18px 45px rgba(11,41,77,.11);
  --radius:14px;
}
body[data-theme="light"] .pricing-content{
  color-scheme: light;
  --bg:#f6fbff;
  --bg2:#eef7ff;
  --panel:#ffffff;
  --panel2:#f3f9ff;
  --card:#ffffff;
  --card2:#f7fbff;
  --line:#d8e8f6;
  --line2:#c5dcf2;
  --text:#071833;
  --muted:#5e6d7f;
  --shadow:0 18px 45px rgba(11,41,77,.11);
}
.pricing-content, .pricing-content *{box-sizing:border-box}
.pricing-content{scroll-behavior:smooth}
.pricing-content{
  margin:0;
  background:radial-gradient(circle at 45% -10%,rgba(32,200,255,.10),transparent 35%),linear-gradient(180deg,var(--bg),var(--bg2) 70%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
}
.pricing-content a{color:inherit;text-decoration:none}
.pricing-content button{font:inherit}
.pricing-content svg{display:block}
.pricing-content .wrap{width:min(1640px,calc(100% - 44px));margin:auto}
.pricing-content .header{
  position:sticky;top:0;z-index:20;
  background:rgba(4,15,27,.96);
  border-bottom:1px solid rgba(85,143,180,.32);
}
body[data-theme="light"] .pricing-content .header{background:rgba(255,255,255,.96)}
.pricing-content .nav{height:58px;display:flex;align-items:center;gap:30px}
.pricing-content .logo{font-size:28px;font-weight:1000;letter-spacing:-.06em;white-space:nowrap;color:var(--text)}
.pricing-content .logo span{color:var(--cyan)}
.pricing-content .menu{display:flex;align-items:center;gap:34px;margin-left:16px;flex:1;justify-content:center}
.pricing-content .menu a{font-weight:850;font-size:14px;color:var(--text);opacity:.92;line-height:1.1;position:relative;text-align:center}
.pricing-content .menu a.active{color:var(--cyan)}
.pricing-content .menu a.active:after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--cyan)}
.pricing-content .nav-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.pricing-content .trust{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;color:var(--text);white-space:nowrap}
.pricing-content .trust svg{color:#cfe8ff}
.pricing-content .theme-toggle{height:34px;width:108px;border:1px solid var(--line2);border-radius:999px;background:#0a1b2d;color:var(--text);display:flex;align-items:center;justify-content:space-around;padding:0 9px;cursor:pointer}
body[data-theme="light"] .pricing-content .theme-toggle{background:#eef6ff}
.pricing-content .switch-dot{width:35px;height:22px;border-radius:999px;background:#1d70b8;display:flex;align-items:center;padding:2px;position:relative}
.pricing-content .switch-dot:after{content:"";width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:.2s;margin-left:auto}
body[data-theme="light"] .pricing-content .switch-dot:after{margin-left:0}





.pricing-content .cta{
    background: linear-gradient(135deg,#25cfff,#198bff);
    padding: 10px 18px;
    border-radius: 7px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(28,157,255,.22)
}








.pricing-content .main{padding:18px 0 34px}
.pricing-content .hero-card{
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(11,35,58,.97),rgba(7,22,38,.97));
  border-radius:10px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
body[data-theme="light"] .pricing-content .hero-card{background:linear-gradient(135deg,#ffffff,#f3f9ff)}
.pricing-content .hero-grid{display:grid;grid-template-columns:40.5% 59.5%;min-height:320px}
.pricing-content .hero-copy{padding:22px 48px 22px;border-right:1px solid var(--line)}
.pricing-content .kicker{color:var(--cyan);font-size:12px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.pricing-content h1{font-size:44px;line-height:1.02;letter-spacing:-.055em;margin:0 0 16px;font-weight:1000}
.pricing-content h1 span{color:var(--blue)}
.pricing-content .hero-copy p{font-size:16px;line-height:1.55;color:var(--muted);max-width:560px;margin:0 0 22px}
.pricing-content .hero-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;max-width:610px}
.pricing-content .hero-icons .hi{display:flex;align-items:center;gap:12px;min-height:52px}
.pricing-content .icon-box{width:48px;height:48px;border:1px solid var(--line2);border-radius:10px;display:grid;place-items:center;color:var(--cyan);background:linear-gradient(180deg,rgba(14,55,84,.85),rgba(8,27,46,.85))}
body[data-theme="light"] .pricing-content .icon-box{background:#f3f9ff}
.pricing-content .hi b{display:block;font-weight:1000;font-size:14px}.pricing-content .hi small{display:block;color:var(--muted);font-weight:600;margin-top:3px}
.pricing-content .hero-chart{padding:20px 48px 14px;position:relative}
.pricing-content .chart-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:8px}
.pricing-content .chart-title{font-weight:1000;font-size:15px;color:var(--text)}
.pricing-content .chart-title span{font-weight:700;color:var(--muted);font-size:12px}.pricing-content .info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--muted);border-radius:50%;font-size:10px;margin-left:5px;color:var(--muted)}
.pricing-content .lead-badge{border:1px solid rgba(57,220,121,.55);color:#55f184;background:rgba(33,155,78,.16);border-radius:5px;padding:7px 14px;font-weight:1000;font-size:13px;white-space:nowrap}.pricing-content .chart-area{height:235px;position:relative}.pricing-content .chart-area svg{width:100%;height:100%;overflow:visible}.pricing-content .chart-note{text-align:center;color:var(--muted);font-size:12px;margin-top:-2px}
.pricing-content .tabs{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:2px;overflow:hidden;background:rgba(7,26,44,.8)}
body[data-theme="light"] .pricing-content .tabs{background:#fff}
.pricing-content .main-tab{height:56px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--text);font-weight:1000;font-size:16px;display:flex;gap:13px;align-items:center;justify-content:center;cursor:pointer}.pricing-content .main-tab:last-child{border-right:0}.pricing-content .main-tab.active{background:linear-gradient(180deg,rgba(18,83,121,.7),rgba(10,38,64,.8));box-shadow:inset 0 -3px 0 var(--cyan);color:#fff}.pricing-content .main-tab span{color:#fff;background:#06182a;border-radius:99px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
body[data-theme="light"] .pricing-content .main-tab.active{background:#eef8ff;color:#0b2450}.pricing-content .tab-count{font-size:12px;color:var(--muted);margin-left:-6px}
.pricing-content .section-panel{margin-top:12px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(7,26,44,.93),rgba(9,34,58,.93));border-radius:7px;padding:24px 28px;box-shadow:var(--shadow)}
body[data-theme="light"] .pricing-content .section-panel{background:#fff}.pricing-content .section-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}.pricing-content .section-title{display:flex;align-items:center;gap:14px}.pricing-content .section-title h2{font-size:20px;margin:0 0 3px}.pricing-content .section-title p{font-size:13px;color:var(--muted);margin:0}.pricing-content .provider-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;min-width:780px;max-width:790px}.pricing-content .provider-tabs button{border:1px solid var(--line2);background:linear-gradient(180deg,rgba(12,38,62,.95),rgba(8,26,44,.95));color:var(--text);height:39px;font-size:15px;font-weight:1000;cursor:pointer}.pricing-content .provider-tabs button:first-child{border-radius:7px 0 0 7px}.pricing-content .provider-tabs button:last-child{border-radius:0 7px 7px 0}.pricing-content .provider-tabs button.active{background:linear-gradient(135deg,#2176ff,#1eaaff);border-color:#178bff;color:#fff}
body[data-theme="light"] .pricing-content .provider-tabs button{background:#178bff}.pricing-content .content-grid{display:grid;grid-template-columns:48% 52%;gap:22px;align-items:start;margin-top:15px}.pricing-content .plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.pricing-content .pack-card{min-height:160px;border:1px solid var(--line2);border-radius:9px;background:linear-gradient(180deg,rgba(13,42,68,.98),rgba(8,28,47,.98));padding:18px 18px 16px;position:relative;overflow:hidden}.pricing-content .pack-card.green{border-color:#0f9656;background:linear-gradient(145deg,rgba(8,78,56,.92),rgba(8,29,46,.98))}.pricing-content .pack-card.blue{border-color:#138dff}.pricing-content .pack-card.purple{border-color:#7f4cd7;background:linear-gradient(145deg,rgba(52,34,84,.86),rgba(8,29,46,.98))}.pricing-content .pack-card h3{margin:0 0 8px;color:#4ee7c1;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.pricing-content .pack-card.blue h3{color:#38a8ff}.pricing-content .pack-card.purple h3{color:#af6dff}.pricing-content .price{font-size:33px;font-weight:1000;letter-spacing:-.04em}.pricing-content .price small{font-size:17px;color:var(--muted);font-weight:850}.pricing-content .subline{font-weight:950;color:#d8e9f8;margin:3px 0 15px}.pricing-content .pack-card ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;color:#e7f4ff}.pricing-content .pack-card li{font-size:13px;line-height:1.25;display:flex;gap:8px}.pricing-content .pack-card li:before{content:"✓";color:#55f184;font-weight:1000}.pricing-content .badge{position:absolute;right:14px;top:10px;background:#1d9eff;color:#fff;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:1000}.pricing-content .table-card{border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:rgba(9,26,43,.7)}body[data-theme="light"] .pricing-content .table-card{background:#fafdff}.pricing-content .data-table{width:100%;border-collapse:collapse;font-size:13px}.pricing-content .data-table th{background:rgba(27,62,92,.7);padding:10px 12px;text-align:left;font-weight:1000}.pricing-content .data-table td{padding:10px 12px;border-top:1px solid var(--line);border-right:1px solid var(--line)}.pricing-content .data-table td:last-child, .pricing-content .data-table th:last-child{border-right:0}.pricing-content .note{margin-top:12px;border:1px solid var(--line2);border-radius:8px;padding:10px 14px;color:#cfe5f8;background:rgba(18,56,88,.55);font-size:13px;display:flex;align-items:center;gap:10px}body[data-theme="light"] .pricing-content .note{color:#17385b;background:#f2f8ff}.pricing-content .membership-pane .content-grid{grid-template-columns:1fr}.pricing-content .membership-table th, .pricing-content .membership-table td{text-align:center}.pricing-content .membership-table th:first-child, .pricing-content .membership-table td:first-child{text-align:left}.pricing-content .check{color:#57e869;font-weight:1000}.pricing-content .x{color:#ff5f47;font-weight:1000}.pricing-content .hide{display:none!important}
.pricing-content .footer{height:44px;color:var(--muted);font-size:12px;text-align:center;padding:20px 0}
@media (max-width:1120px){.pricing-content .wrap{width:min(100% - 24px,1640px)}.pricing-content .menu{display:none}.pricing-content .hero-grid, .pricing-content .content-grid{grid-template-columns:1fr}.pricing-content .hero-copy{border-right:0;border-bottom:1px solid var(--line)}.pricing-content .hero-chart{padding:20px 30px}.pricing-content .provider-tabs{min-width:0;max-width:none;width:100%}.pricing-content .section-top{display:block}.pricing-content .provider-tabs{margin-top:14px}.pricing-content .plan-cards, .pricing-content .hero-icons{grid-template-columns:1fr}.pricing-content .nav{gap:12px}.pricing-content .trust{display:none}.pricing-content .cta{padding:11px 14px}.pricing-content .logo{font-size:22px}}
@media (max-width:720px){.pricing-content h1{font-size:40px}.pricing-content .hero-copy, .pricing-content .hero-chart, .pricing-content .section-panel{padding-left:16px;padding-right:16px}.pricing-content .tabs{grid-template-columns:1fr}.pricing-content .main-tab{border-right:0;border-bottom:1px solid var(--line)}.pricing-content .plan-cards, .pricing-content .provider-tabs{grid-template-columns:1fr}.pricing-content .provider-tabs button{border-radius:7px!important}.pricing-content .nav-right{gap:8px}.pricing-content .theme-toggle{width:84px}.pricing-content .cta{display:none}}

/* Icon color helpers moved from inline styles */
.pricing-content .icon-green{color:#4ee683}
.pricing-content .icon-purple{color:#9b5cff}

/* v2 PRICING LIGHT MODE VISIBILITY FIX */
body[data-theme="light"] .pricing-content{
  background:
    radial-gradient(circle at 45% -10%, rgba(32,200,255,.10), transparent 35%),
    linear-gradient(180deg, var(--bg), var(--bg2) 70%);
  color: var(--text);
}

body[data-theme="light"] .pricing-content .section-panel, body[data-theme="light"] .pricing-content .table-card, body[data-theme="light"] .pricing-content .note{
  color: #071833;
}

body[data-theme="light"] .pricing-content .pack-card, body[data-theme="light"] .pricing-content .pack-card.green, body[data-theme="light"] .pricing-content .pack-card.blue, body[data-theme="light"] .pricing-content .pack-card.purple{
  background: #ffffff !important;
  border-color: #c5dcf2 !important;
  box-shadow: 0 10px 28px rgba(11,41,77,.08);
}

body[data-theme="light"] .pricing-content .pack-card.green{
  border-left: 4px solid #16a466 !important;
}

body[data-theme="light"] .pricing-content .pack-card.blue{
  border-left: 4px solid #1688ff !important;
}

body[data-theme="light"] .pricing-content .pack-card.purple{
  border-left: 4px solid #8b5cf6 !important;
}

body[data-theme="light"] .pricing-content .pack-card h3{
  color: #0a8f6a !important;
}

body[data-theme="light"] .pricing-content .pack-card.blue h3{
  color: #087cff !important;
}

body[data-theme="light"] .pricing-content .pack-card.purple h3{
  color: #7c3aed !important;
}

body[data-theme="light"] .pricing-content .pack-card .price, body[data-theme="light"] .pricing-content .pack-card .price small, body[data-theme="light"] .pricing-content .pack-card .subline, body[data-theme="light"] .pricing-content .pack-card ul, body[data-theme="light"] .pricing-content .pack-card li{
  color: #071833 !important;
}

body[data-theme="light"] .pricing-content .pack-card li::before{
  color: #16a34a !important;
}

body[data-theme="light"] .pricing-content .badge{
  color: #ffffff !important;
}

body[data-theme="light"] .pricing-content .data-table{
  color: #071833 !important;
  background: #ffffff;
}

body[data-theme="light"] .pricing-content .data-table th{
  background: #dcecf8 !important;
  color: #071833 !important;
  border-color: #c5dcf2 !important;
}

body[data-theme="light"] .pricing-content .data-table td{
  background: #ffffff !important;
  color: #17385b !important;
  border-color: #d8e8f6 !important;
}

body[data-theme="light"] .pricing-content .provider-tabs button{
  background: #e9f4ff !important;
  color: #071833 !important;
  border-color: #b8d7f2 !important;
}

body[data-theme="light"] .pricing-content .provider-tabs button.active{
  background: linear-gradient(135deg, #1688ff, #20bfff) !important;
  color: #ffffff !important;
  border-color: #1688ff !important;
}

body[data-theme="light"] .pricing-content .main-tab{
  color: #071833 !important;
  background: #ffffff;
}

body[data-theme="light"] .pricing-content .main-tab span{
  color: #ffffff !important;
  background: #1688ff !important;
}

body[data-theme="light"] .pricing-content .main-tab.active{
  background: #e9f6ff !important;
  color: #087cff !important;
}

body[data-theme="light"] .pricing-content .section-title h2, body[data-theme="light"] .pricing-content .section-title p, body[data-theme="light"] .pricing-content .note, body[data-theme="light"] .pricing-content .note span, body[data-theme="light"] .pricing-content .note b{
  color: #17385b !important;
}

body[data-theme="light"] .pricing-content .hero-card, body[data-theme="light"] .pricing-content .hero-copy, body[data-theme="light"] .pricing-content .hero-chart, body[data-theme="light"] .pricing-content .chart-title, body[data-theme="light"] .pricing-content .chart-note, body[data-theme="light"] .pricing-content .hi b, body[data-theme="light"] .pricing-content .hi small{
  color: #071833 !important;
}

body[data-theme="light"] .pricing-content .hero-copy p, body[data-theme="light"] .pricing-content .chart-title span, body[data-theme="light"] .pricing-content .chart-note, body[data-theme="light"] .pricing-content .hi small{
  color: #5e6d7f !important;
}

body[data-theme="light"] .pricing-content .lead-badge{
  color: #137a3d !important;
  background: #eaf9ef !important;
  border-color: #8bd4a6 !important;
}

/* v3 TRUSTED SHIELD HEADER FIX */
.pricing-content .trust svg{
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  padding: 5px;
  border-radius: 50%;
  color: #0ed1ff !important;
  stroke: #0ed1ff !important;
  background: rgba(14,209,255,.08);
  border: 1px solid rgba(14,209,255,.35);
  box-shadow: 0 0 0 3px rgba(14,209,255,.04);
}

body[data-theme="light"] .pricing-content .trust svg{
  color: #087cff !important;
  stroke: #087cff !important;
  background: #eef7ff;
  border-color: #b8d7ff;
  box-shadow: 0 0 0 3px rgba(8,124,255,.04);
}