/* ==========================================================================
   Deep Stream Data — Global Stylesheet
   Dark, data-forward brand identity
   ========================================================================== */

:root {
    /* === Brand: Deep Stream Data === */
    --ds-bg:          #07090F;
    --ds-bg-elev:     #0E1220;
    --ds-surface:     #151A2D;
    --ds-surface-2:   #1C2340;
    --ds-border:      rgba(255, 255, 255, 0.08);
    --ds-border-2:    rgba(255, 255, 255, 0.14);

    --ds-text:        #FFFFFF;
    --ds-text-2:      rgba(255, 255, 255, 0.72);
    --ds-text-3:      rgba(255, 255, 255, 0.52);
    --ds-text-4:      rgba(255, 255, 255, 0.38);

    --ds-cyan:        #00D4FF;   /* stream / data */
    --ds-cyan-2:      #38E8FF;
    --ds-violet:      #8B5CF6;   /* AI intelligence */
    --ds-violet-2:    #A78BFA;
    --ds-green:       #10B981;
    --ds-amber:       #F59E0B;
    --ds-red:         #EF4444;

    --ds-gradient:    linear-gradient(135deg, var(--ds-cyan) 0%, var(--ds-violet) 100%);
    --ds-gradient-2:  linear-gradient(135deg, rgba(0,212,255,0.15) 0%, rgba(139,92,246,0.15) 100%);

    --ds-shadow:      0 8px 32px rgba(0, 0, 0, 0.4);
    --ds-glow-cyan:   0 0 40px rgba(0, 212, 255, 0.35);
    --ds-glow-violet: 0 0 40px rgba(139, 92, 246, 0.35);

    --ds-radius:      14px;
    --ds-radius-sm:   8px;
    --ds-radius-lg:   22px;

    --ds-max:         1200px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ds-bg);
    color: var(--ds-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Ambient background gradient */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% -10%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 80% 120%, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

main, nav, footer { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ds-text);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 1rem; }
h3 { font-size: 1.35rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.05rem; }

p  { color: var(--ds-text-2); font-size: 1.05rem; }
a  { color: var(--ds-cyan); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--ds-cyan-2); }

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-cyan);
    margin-bottom: 1rem;
}

.gradient-text {
    background: var(--ds-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lead {
    font-size: 1.25rem;
    color: var(--ds-text-2);
    max-width: 720px;
    line-height: 1.55;
}

/* ---------- Layout ---------- */
.container {
    max-width: var(--ds-max);
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 88px 0;
    position: relative;
}

section.compact { padding: 56px 0; }

.section-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.section-head.left { text-align: left; margin-left: 0; }

/* ---------- Navigation ---------- */
.ds-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(7, 9, 15, 0.72);
    border-bottom: 1px solid var(--ds-border);
}

.ds-nav-inner {
    max-width: var(--ds-max);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ds-logo {
    display: inline-flex;
    align-items: center;
    color: var(--ds-text);
    text-decoration: none;
    line-height: 0;
}

.ds-logo img {
    display: block;
    height: 56px;
    width: auto;
}

/* Dark-surface logo: single SVG, inverted via filter so it reads correctly
   on dark navy. Applied wherever the logo sits on the brand dark background
   (header, footer). On light surfaces, omit this selector and the logo
   renders in its native colours. */
.ds-header .ds-logo img,
.ds-footer .ds-logo img {
    filter: invert(1) hue-rotate(180deg) brightness(1.15) saturate(1.3);
}

.ds-footer .ds-logo img {
    height: 64px;
}

@media (max-width: 720px) {
    .ds-logo img { height: 46px; }
    .ds-footer .ds-logo img { height: 52px; }
}

@media (max-width: 520px) {
    .ds-logo img { height: 40px; }
    .ds-footer .ds-logo img { height: 44px; }
}

/* Legacy mark — kept hidden in case any embedded references remain */
.ds-logo-mark { display: none; }

.ds-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}
.ds-nav-links a {
    color: var(--ds-text-2);
    font-size: 0.95rem;
    font-weight: 500;
}
.ds-nav-links a:hover,
.ds-nav-links a.active { color: var(--ds-text); }

.ds-nav-links a.cta-link {
    padding: 9px 18px;
    background: var(--ds-text);
    color: var(--ds-bg);
    border-radius: 999px;
    font-weight: 600;
}

/* ---------- Mobile nav toggle ---------- */
.ds-nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid var(--ds-border-2);
    border-radius: 10px;
    color: var(--ds-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.ds-nav-toggle:hover { background: var(--ds-surface); }
.ds-nav-toggle svg { width: 22px; height: 22px; display: block; }
.ds-nav-toggle .icon-close { display: none; }
.ds-nav.open .ds-nav-toggle .icon-open { display: none; }
.ds-nav.open .ds-nav-toggle .icon-close { display: block; }

@media (max-width: 820px) {
    .ds-nav-inner { position: relative; }
    .ds-nav-toggle { display: inline-flex; }
    .ds-nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        background: rgba(7, 9, 15, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 20px 20px;
        gap: 0;
        border-bottom: 1px solid var(--ds-border);
    }
    .ds-nav-links a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--ds-border);
        font-size: 1rem;
    }
    .ds-nav-links a:last-child { border-bottom: none; }
    .ds-nav-links a.cta-link {
        margin-top: 14px;
        text-align: center;
        padding: 12px 18px;
        border-bottom: none;
    }
    .ds-nav.open .ds-nav-links { display: flex; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--ds-gradient);
    color: var(--ds-bg);
    box-shadow: var(--ds-glow-cyan);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 48px rgba(0, 212, 255, 0.55); color: var(--ds-bg); }

.btn-secondary {
    background: transparent;
    color: var(--ds-text);
    border: 1px solid var(--ds-border-2);
}
.btn-secondary:hover { background: var(--ds-surface); color: var(--ds-text); }

.btn-ghost {
    background: transparent;
    color: var(--ds-cyan);
    padding: 13px 0;
}
.btn-ghost:hover { color: var(--ds-cyan-2); }

.btn svg { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero {
    padding: 120px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, #000 0%, transparent 70%);
    pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 24px; }
.hero .lead { margin: 0 auto 36px; }

.hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    font-size: 0.82rem;
    color: var(--ds-text-2);
    margin-bottom: 28px;
}
.hero-badge .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ds-green);
    box-shadow: 0 0 8px var(--ds-green);
}

/* ---------- Stats strip ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 64px;
}
.stats .stat {
    padding: 24px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}
.stats .stat .v {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    background: var(--ds-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}
.stats .stat .k {
    font-size: 0.9rem;
    color: var(--ds-text-3);
    margin-top: 6px;
}

@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards & grids ---------- */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

.card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 28px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.card:hover {
    transform: translateY(-3px);
    border-color: var(--ds-border-2);
    background: var(--ds-surface-2);
}

.card .icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--ds-gradient-2);
    border: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--ds-cyan);
}
.card .icon svg { width: 22px; height: 22px; }

.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.98rem; color: var(--ds-text-2); }

/* ---------- Comparison table ---------- */
.compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-bg-elev);
}
table.compare {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}
table.compare th,
table.compare td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: top;
    font-size: 0.95rem;
}
table.compare thead th {
    background: var(--ds-surface);
    color: var(--ds-text);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    position: sticky; top: 0;
}
table.compare thead th.ds-col {
    background: var(--ds-gradient);
    color: var(--ds-bg);
    font-weight: 700;
}
table.compare tbody tr:hover { background: rgba(255,255,255,0.015); }
table.compare td.ds-col {
    background: rgba(0, 212, 255, 0.04);
    border-left: 1px solid rgba(0, 212, 255, 0.18);
    border-right: 1px solid rgba(139, 92, 246, 0.18);
    font-weight: 500;
    color: var(--ds-text);
}
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare td.feature {
    font-weight: 600;
    color: var(--ds-text);
    width: 240px;
}
.tick  { color: var(--ds-green); font-weight: 700; }
.cross { color: var(--ds-text-4); font-weight: 700; }
.partial { color: var(--ds-amber); font-weight: 700; }

/* ---------- Accordion / FAQ ---------- */
.faq {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}
.faq details {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 22px 26px;
    transition: background 0.2s ease;
}
.faq details[open] {
    background: var(--ds-surface-2);
    border-color: var(--ds-border-2);
}
.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--ds-cyan);
    transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 14px; color: var(--ds-text-2); }

/* ---------- CTA band ---------- */
.cta-band {
    padding: 80px 0;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,212,255,0.12) 0%, transparent 70%),
        var(--ds-bg-elev);
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}
.cta-band h2 { max-width: 720px; margin: 0 auto 16px; }
.cta-band p  { max-width: 600px; margin: 0 auto 28px; font-size: 1.1rem; }

/* ---------- Footer ---------- */
.ds-footer {
    padding: 56px 0 32px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg);
    color: var(--ds-text-3);
    font-size: 0.92rem;
}
.ds-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
}
@media (max-width: 760px) { .ds-footer-grid { grid-template-columns: 1fr 1fr; } }
.ds-footer h5 { color: var(--ds-text); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; }
.ds-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ds-footer ul a { color: var(--ds-text-3); }
.ds-footer ul a:hover { color: var(--ds-text); }
.ds-footer p.blurb { color: var(--ds-text-3); max-width: 320px; margin-top: 14px; }
.ds-footer-bottom {
    padding-top: 28px;
    border-top: 1px solid var(--ds-border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

/* ---------- Page hero (non-home) ---------- */
.page-hero {
    padding: 88px 0 56px;
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
}
.page-hero .container { max-width: 880px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 20px; }

/* ---------- Journey diagram ---------- */
.journey-diagram {
    margin: 40px 0;
    padding: 32px;
    background: var(--ds-bg-elev);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    position: relative;
    overflow: hidden;
}
.journey-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--ds-border);
}
.journey-row:last-child { border-bottom: none; }
.journey-row .label {
    font-size: 0.85rem;
    color: var(--ds-text-3);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.journey-steps {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.journey-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-2);
    white-space: nowrap;
}
.journey-pill.comp { border-color: rgba(139, 92, 246, 0.4); color: var(--ds-violet-2); background: rgba(139, 92, 246, 0.08); }
.journey-pill.own  { border-color: rgba(0, 212, 255, 0.4); color: var(--ds-cyan-2); background: rgba(0, 212, 255, 0.08); }
.journey-pill.off  { border-color: var(--ds-border-2); color: var(--ds-text-3); }
.journey-arrow {
    color: var(--ds-text-4);
    font-size: 1.1rem;
}
.journey-row.highlight {
    background: linear-gradient(90deg, rgba(0,212,255,0.04), transparent 80%);
    margin: 0 -16px;
    padding: 14px 16px;
    border-radius: 10px;
}

/* ---------- Form ---------- */
.form {
    display: grid;
    gap: 14px;
    max-width: 640px;
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.form label {
    font-size: 0.85rem;
    color: var(--ds-text-2);
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
}
.form input, .form select, .form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-2);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    font-size: 0.98rem;
    font-family: inherit;
    transition: border-color 0.18s ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--ds-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}
.form textarea { min-height: 120px; resize: vertical; }

/* ---------- Logo strip ---------- */
.logo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    opacity: 0.72;
}
.logo-strip .logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--ds-text-2);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    padding: 8px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-surface);
}

/* ---------- Small utility ---------- */
.callout {
    background: var(--ds-gradient-2);
    border: 1px solid rgba(0, 212, 255, 0.22);
    border-radius: var(--ds-radius);
    padding: 22px 26px;
    margin: 28px 0;
}
.callout strong { color: var(--ds-cyan); }

.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(139, 92, 246, 0.12);
    color: var(--ds-violet-2);
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.tag.v2 { background: var(--ds-gradient); color: var(--ds-bg); border: none; }

.divider { height: 1px; background: var(--ds-border); margin: 48px 0; }

ul.check {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}
ul.check li {
    position: relative;
    padding-left: 28px;
    color: var(--ds-text-2);
}
ul.check li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ds-gradient);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}
ul.check li::after {
    content: "";
    position: absolute;
    left: 5px; top: 12px;
    width: 6px; height: 3px;
    border-left: 2px solid var(--ds-bg);
    border-bottom: 2px solid var(--ds-bg);
    transform: rotate(-45deg);
}

/* Takeaways grid — 2x2 on desktop, stacks to 1 column on narrower screens */
ul.check.takeaways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
    margin: 0;
}
ul.check.takeaways-grid li {
    line-height: 1.55;
}
@media (max-width: 820px) {
    ul.check.takeaways-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ---------- Page layout sections ---------- */
.two-col {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

.two-col .visual {
    padding: 32px;
    background: var(--ds-bg-elev);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

/* ==========================================================================
   Mobile polish
   ========================================================================== */

/* Data-flow step row — restore per-card pill shape when the 4-col collapses */
@media (max-width: 900px) {
    .step-row > div {
        border-radius: var(--ds-radius) !important;
        border-left: 1px solid var(--ds-border) !important;
    }
    .step-row { gap: 12px !important; }
}

/* Footer — collapse to single column on narrow phones */
@media (max-width: 520px) {
    .ds-footer-grid { grid-template-columns: 1fr; }
}

/* Section/hero padding — tighten on mobile to reduce scroll length */
@media (max-width: 720px) {
    section { padding: 56px 0; }
    section.compact { padding: 40px 0; }
    .hero { padding: 72px 0 56px; }
    .page-hero { padding: 56px 0 40px; }
    .section-head { margin-bottom: 32px; }
    .container { padding: 0 20px; }
    .card { padding: 22px; }
}

/* ============================================================
   Accessibility: skip-to-content link
   ============================================================ */
.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    padding: 10px 16px;
    background: var(--ds-text, #EDEFF3);
    color: var(--ds-bg, #0A0E1A);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    z-index: 1000;
    transition: top 0.15s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
    outline: 2px solid var(--ds-cyan, #22D3EE);
    outline-offset: 2px;
}
main:focus { outline: none; }

/* Header landmark is purely structural — no extra styling needed,
   ds-nav already carries the visual chrome. */
.ds-header { display: block; }

/* ============================================================
   Compare table — stacked card layout at mobile widths
   ============================================================ */
@media (max-width: 720px) {
    .compare-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
        border-radius: 0;
    }
    table.compare,
    table.compare thead,
    table.compare tbody,
    table.compare tr,
    table.compare th,
    table.compare td {
        display: block;
        width: 100%;
    }
    table.compare {
        min-width: 0;
    }
    /* Hide the table head — each cell surfaces its own label */
    table.compare thead {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    table.compare tbody tr {
        background: var(--ds-bg-elev);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-lg, 12px);
        padding: 16px 18px;
        margin-bottom: 14px;
    }
    table.compare tbody tr:hover { background: var(--ds-bg-elev); }
    table.compare td {
        padding: 10px 0;
        border-bottom: 1px dashed var(--ds-border);
        font-size: 0.95rem;
    }
    table.compare td:last-child { border-bottom: none; }
    table.compare td.feature {
        width: 100%;
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--ds-text);
        padding: 2px 0 12px;
        border-bottom: 1px solid var(--ds-border);
        margin-bottom: 6px;
    }
    /* Label each competitor value using the data-label attribute */
    table.compare td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ds-text-3, #94A3B8);
        margin-bottom: 4px;
    }
    /* Keep Deep Stream Data column visually highlighted in mobile card too */
    table.compare td.ds-col {
        background: rgba(0, 212, 255, 0.05);
        border-left: 3px solid var(--ds-cyan, #22D3EE);
        padding-left: 10px;
        margin: 6px -4px 6px -4px;
        border-radius: 6px;
    }
    table.compare td.ds-col[data-label]::before {
        color: var(--ds-cyan, #22D3EE);
    }
}