/*
 * Developers page editorial layout.
 *
 * This sheet intentionally loads after the shared legacy and navigation
 * styles. Keep every rule page-scoped: the catalog renderer and many older
 * public surfaces still share class names from /styles.css.
 */

body.developers-page {
    --dev-ink: #0c1222;
    --dev-ink-soft: #273047;
    --dev-ink-raised: #141d30;
    --dev-paper: #f5f1e9;
    --dev-paper-bright: #fffdf8;
    --dev-paper-muted: #e9e3d9;
    --dev-coral: #e8613a;
    --dev-coral-dark: #b94223;
    --dev-cyan: #08758a;
    --dev-cyan-bright: #67e8f9;
    --dev-content-max: 78rem;
    --dev-gutter: clamp(1rem, 4vw, 3rem);
    background: var(--dev-ink);
}

body.developers-page #main-content {
    background: var(--dev-paper);
    color: var(--dev-ink);
}

body.developers-page #main-content :where(
    .hero-content,
    .hero-intro,
    .hero-proof,
    .container,
    .trust-grid,
    .trust-card,
    .capabilities-grid,
    .capability-card,
    .cap-header,
    .cap-footer,
    .cap-stats,
    .qs-panel,
    .qs-step-content,
    .code-block,
    .hero-code-snippet,
    .snippet-body,
    .install-row,
    .install-cmd
) {
    min-width: 0;
}

body.developers-page #main-content :where(pre, code) {
    max-width: 100%;
}

body.developers-page #main-content :where(a, button, input, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--dev-cyan-bright);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--dev-ink);
}

/* Hero ------------------------------------------------------------------- */

body.developers-page #main-content #hero {
    --dev-action: var(--dev-coral-dark);
    --dev-action-hover: #8f301a;
    --dev-button-text: #fffdf8;
    --text-primary: var(--dev-ink);
    --text-secondary: var(--dev-ink-soft);
    --text-muted: #5c6477;
    --text-link: var(--dev-coral-dark);
    --accent: var(--dev-coral-dark);
    --accent-hover: #8f301a;
    --accent-border: rgba(185, 66, 35, 0.34);
    --border: rgba(12, 18, 34, 0.18);
    --border-strong: rgba(12, 18, 34, 0.28);
    --bg-code: var(--dev-ink);
    --bg-elevated: #172139;
    position: relative;
    display: block;
    min-height: auto;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(12, 18, 34, 0.18);
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(12, 18, 34, 0.12) 50%, transparent calc(50% + 0.5px)),
        var(--dev-paper);
    color: var(--dev-ink);
}

body.developers-page #main-content #hero .hero-bg,
body.developers-page #main-content #hero .hero-grid,
body.developers-page #main-content #hero .hero-gradient-orb {
    display: none;
}

body.developers-page #main-content #hero .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
    grid-template-areas:
        "intro proof"
        "stats stats";
    column-gap: clamp(3rem, 7vw, 6.5rem);
    row-gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
    width: min(calc(100% - var(--dev-gutter) - var(--dev-gutter)), var(--dev-content-max));
    max-width: none;
    margin-inline: auto;
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
    text-align: left;
}

body.developers-page #main-content #hero .hero-intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

body.developers-page #main-content #hero .hero-proof {
    --text-muted: #aab4c7;
    grid-area: proof;
    display: grid;
    gap: 1rem;
    align-self: start;
    width: 100%;
}

body.developers-page #main-content #hero .hero-badge {
    justify-self: start;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dev-coral-dark);
    animation: none;
}

body.developers-page #main-content #hero .hero-title {
    max-width: 13ch;
    margin: 0;
    color: var(--dev-ink);
    font-size: clamp(3.25rem, 5.8vw, 5.8rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.055em;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

body.developers-page #main-content #hero .hero-title br {
    display: none;
}

body.developers-page #main-content #hero .hero-subtitle {
    width: auto;
    max-width: 42rem;
    margin: 0.75rem 0 0;
    color: var(--dev-ink-soft);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.7;
}

body.developers-page #main-content #hero .hero-intro > .hero-disclaimer {
    max-width: 42rem;
    margin: 0;
    color: #4e576b;
    font-size: 0.9rem;
    line-height: 1.65;
    animation: none;
}

body.developers-page #main-content #hero .hero-content > .hero-disclaimer strong {
    color: var(--dev-ink);
}

body.developers-page #main-content #hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
}

body.developers-page #main-content #hero .hero-install {
    align-self: start;
    display: grid;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0.35rem 1.25rem;
    border: 1px solid rgba(103, 232, 249, 0.42);
    border-radius: 0;
    background: var(--dev-ink);
    color: var(--dev-paper-bright);
    animation: none;
}

body.developers-page #main-content #hero .install-row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    justify-content: initial;
    gap: 0.35rem 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.developers-page #main-content #hero .install-row:last-child {
    border-bottom: 0;
}

body.developers-page #main-content #hero .install-label {
    min-width: 0;
    color: var(--dev-coral);
    text-align: left;
}

body.developers-page #main-content #hero .install-cmd {
    overflow-wrap: anywhere;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--dev-paper-bright);
    font-size: 0.78rem;
}

body.developers-page #main-content #hero .install-copy {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.2);
    color: #aab4c7;
}

body.developers-page #main-content #hero .install-copy:hover {
    border-color: var(--dev-coral);
    color: var(--dev-coral);
}

body.developers-page #main-content #hero .install-copy.copied {
    border-color: #22c55e;
    color: #22c55e;
}

body.developers-page #main-content #hero .install-hint {
    grid-column: 2 / -1;
    color: #98a4ba;
    line-height: 1.45;
}

body.developers-page #main-content #hero .hero-code-snippet {
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 1px solid rgba(103, 232, 249, 0.42);
    border-radius: 0;
    background: var(--dev-ink);
    box-shadow: none;
    animation: none;
}

body.developers-page #main-content #hero .snippet-header {
    background: #172139;
    border-color: rgba(255, 255, 255, 0.12);
}

body.developers-page #main-content #hero .snippet-body {
    padding: 1.25rem;
}

body.developers-page #main-content #hero .snippet-body code {
    color: #e7edf7;
    font-size: clamp(0.7rem, 1vw, 0.82rem);
    line-height: 1.7;
    white-space: pre;
    word-break: normal;
}

body.developers-page #main-content #hero .hero-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    margin: clamp(2rem, 5vw, 4rem) 0 0;
    overflow: visible;
    border: 1px solid rgba(12, 18, 34, 0.2);
    border-radius: 0;
    background: rgba(255, 253, 248, 0.55);
    animation: none;
}

body.developers-page #main-content #hero .hero-stat {
    min-width: 0;
    padding: 1.35rem clamp(0.75rem, 2vw, 1.5rem);
    text-align: left;
}

body.developers-page #main-content #hero .hero-stat + .hero-stat {
    border-left: 1px solid rgba(12, 18, 34, 0.16);
}

body.developers-page #main-content #hero .hero-stat-value {
    color: var(--dev-cyan);
    font-size: clamp(1.15rem, 2vw, 1.6rem);
}

body.developers-page #main-content #hero .hero-stat-label,
body.developers-page #main-content #hero .hero-stat-note {
    color: #5c6477;
}

/* Shared section rail and surface rhythm -------------------------------- */

body.developers-page #main-content > .section {
    --dev-section-bg: var(--dev-paper);
    --dev-section-text: var(--dev-ink);
    --dev-section-muted: var(--dev-ink-soft);
    --dev-section-line: rgba(12, 18, 34, 0.18);
    --dev-card-bg: var(--dev-paper-bright);
    --dev-card-hover: var(--dev-paper-muted);
    --dev-action: var(--dev-coral-dark);
    --dev-action-hover: #8f301a;
    --dev-button-text: #fffdf8;
    --text-primary: var(--dev-section-text);
    --text-secondary: var(--dev-section-muted);
    --text-muted: #5c6477;
    --text-link: var(--dev-action);
    --accent: var(--dev-action);
    --accent-hover: var(--dev-action-hover);
    --accent-subtle: rgba(185, 66, 35, 0.09);
    --accent-border: rgba(185, 66, 35, 0.32);
    --border: var(--dev-section-line);
    --border-hover: rgba(12, 18, 34, 0.34);
    --border-strong: rgba(12, 18, 34, 0.3);
    --bg-card: var(--dev-card-bg);
    --bg-card-hover: var(--dev-card-hover);
    --bg-elevated: var(--dev-paper-muted);
    --bg-input: var(--dev-paper-bright);
    --bg-code: var(--dev-ink);
    position: relative;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    border-top: 0;
    border-bottom: 1px solid var(--dev-section-line);
    background: var(--dev-section-bg);
    background-image: none;
    color: var(--dev-section-text);
    text-align: left;
    color-scheme: light;
}

body.developers-page #main-content > .section.section-dark {
    --dev-section-bg: var(--dev-ink);
    --dev-section-text: #eef2f8;
    --dev-section-muted: #aab4c7;
    --dev-section-line: rgba(255, 255, 255, 0.14);
    --dev-card-bg: var(--dev-ink-raised);
    --dev-card-hover: #1a263e;
    --dev-action: var(--dev-coral);
    --dev-action-hover: #f07a58;
    --dev-button-text: var(--dev-ink);
    --text-muted: #8794aa;
    --accent-subtle: rgba(232, 97, 58, 0.12);
    --accent-border: rgba(232, 97, 58, 0.42);
    --border-hover: rgba(103, 232, 249, 0.42);
    --border-strong: rgba(255, 255, 255, 0.22);
    --bg-elevated: #172139;
    --bg-input: #111a2e;
    color-scheme: dark;
}

body.developers-page #main-content > :is(#developer-outcomes, #guides-section, #faq-section).section-dark {
    --dev-section-bg: var(--dev-paper);
    --dev-section-text: var(--dev-ink);
    --dev-section-muted: var(--dev-ink-soft);
    --dev-section-line: rgba(12, 18, 34, 0.18);
    --dev-card-bg: var(--dev-paper-bright);
    --dev-card-hover: var(--dev-paper-muted);
    --dev-action: var(--dev-coral-dark);
    --dev-action-hover: #8f301a;
    --dev-button-text: #fffdf8;
    --text-muted: #5c6477;
    --accent-subtle: rgba(185, 66, 35, 0.09);
    --accent-border: rgba(185, 66, 35, 0.32);
    --border-hover: rgba(12, 18, 34, 0.34);
    --border-strong: rgba(12, 18, 34, 0.3);
    --bg-elevated: var(--dev-paper-muted);
    --bg-input: var(--dev-paper-bright);
    color-scheme: light;
}

body.developers-page #main-content > :is(#frameworks-section, #welcome-flower-section, #guides-section, #browse-section) {
    --dev-section-bg: var(--dev-paper-muted);
    --dev-card-hover: var(--dev-paper);
}

body.developers-page #main-content > .section > .container,
body.developers-page .site-footer-context > .container {
    width: min(calc(100% - var(--dev-gutter) - var(--dev-gutter)), var(--dev-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

body.developers-page #main-content > .section::before {
    display: none;
}

body.developers-page #main-content .section-title {
    max-width: 20ch;
    margin: 0;
    color: var(--dev-section-text);
    font-size: clamp(2.25rem, 4.7vw, 4.5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-align: left;
    text-wrap: balance;
}

body.developers-page #main-content .section-subtitle {
    width: auto;
    max-width: 54rem;
    margin: 1.25rem 0 2.75rem;
    color: var(--dev-section-muted);
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.75;
    text-align: left;
}

body.developers-page #main-content .section-badge,
body.developers-page #main-content .frameworks-label {
    display: block;
    margin: 0 0 1.25rem;
    color: var(--dev-action);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-align: left;
    text-transform: uppercase;
}

body.developers-page #main-content .accent {
    color: var(--dev-action);
}

body.developers-page #main-content .btn {
    min-height: 2.75rem;
    border-radius: 0;
    box-shadow: none;
    white-space: normal;
}

body.developers-page #main-content .btn-primary {
    border-color: var(--dev-action);
    background: var(--dev-action);
    color: var(--dev-button-text);
}

body.developers-page #main-content .btn-primary:hover {
    border-color: var(--dev-action-hover);
    background: var(--dev-action-hover);
    color: var(--dev-button-text);
    transform: none;
    box-shadow: none;
}

body.developers-page #main-content .btn-ghost {
    border-color: var(--dev-section-line, rgba(12, 18, 34, 0.2));
    background: transparent;
    color: var(--dev-section-text, var(--dev-ink));
}

body.developers-page #main-content .btn-ghost:hover {
    border-color: var(--dev-action);
    background: var(--accent-subtle);
    color: var(--dev-section-text, var(--dev-ink));
    transform: none;
}

/* Direct-answer editorial ledger ---------------------------------------- */

body.developers-page #main-content > [data-answer-card="developers"] .section-header {
    display: grid;
    grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 0.9fr) minmax(0, 1.45fr);
    gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

body.developers-page #main-content > [data-answer-card="developers"] .section-badge {
    grid-column: 1;
    margin-top: 0.4rem;
}

body.developers-page #main-content > [data-answer-card="developers"] .section-title {
    grid-column: 2;
    grid-row: 1 / span 4;
    max-width: 13ch;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
}

body.developers-page #main-content > [data-answer-card="developers"] .section-subtitle,
body.developers-page #main-content > [data-answer-card="developers"] .section-header > .hero-disclaimer {
    grid-column: 3;
    max-width: none;
    margin: 0;
}

body.developers-page #main-content > [data-answer-card="developers"] .section-header > .hero-disclaimer {
    padding: 1rem 1.1rem;
    border-left: 2px solid var(--dev-action);
    background: rgba(255, 255, 255, 0.04);
    color: var(--dev-section-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    animation: none;
}

body.developers-page #main-content #paid-runtime-status {
    border-left-color: var(--dev-cyan-bright);
}

/* Cards and evidence grids ------------------------------------------------ */

body.developers-page #main-content .trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    width: 100%;
    margin: 2.75rem 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.developers-page #main-content .trust-card,
body.developers-page #main-content .trust-card--link,
body.developers-page #main-content .compliance-item--card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1.35rem, 2.6vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--dev-section-line);
    border-radius: 0;
    background: var(--dev-card-bg);
    background-image: none;
    color: var(--dev-section-text);
    box-shadow: none;
    text-align: left;
}

body.developers-page #main-content .trust-card:hover,
body.developers-page #main-content .trust-card--link:hover,
body.developers-page #main-content .compliance-item--card:hover {
    border-color: var(--dev-action);
    background: var(--dev-card-hover);
    color: var(--dev-section-text);
    transform: none;
    box-shadow: none;
}

body.developers-page #main-content .trust-card h3,
body.developers-page #main-content .trust-card--link h3,
body.developers-page #main-content .compliance-item--card h3 {
    margin: 0 0 0.7rem;
    color: var(--dev-section-text);
    font-size: 1.05rem;
    line-height: 1.3;
}

body.developers-page #main-content .trust-card p,
body.developers-page #main-content .trust-card--link p,
body.developers-page #main-content .compliance-item--card p {
    margin: 0;
    color: var(--dev-section-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

body.developers-page #main-content .trust-card p + p {
    margin-top: 1rem;
}

body.developers-page #main-content .trust-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 1.25rem;
    border-color: var(--dev-section-line);
    border-radius: 0;
    background: transparent;
}

body.developers-page #main-content .trust-icon svg {
    color: var(--dev-cyan);
}

body.developers-page #main-content .section-dark .trust-icon svg {
    color: var(--dev-cyan-bright);
}

body.developers-page #main-content .trust-card .discovery-url {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 0.7rem;
}

body.developers-page #main-content :is(#resources-section, #for-agents-section) .discovery-url {
    color: #075f70;
}

body.developers-page #main-content .trust-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 2rem 0 0;
    text-align: left;
}

body.developers-page #main-content .references {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 3rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem 0 0 1.5rem;
    border-top: 1px solid var(--dev-section-line);
    color: var(--dev-section-muted);
    text-align: left;
}

body.developers-page #main-content .references li {
    padding-left: 0.35rem;
    line-height: 1.55;
}

/* Frameworks, feature, testimonials, and compliance ---------------------- */

body.developers-page #main-content #frameworks-section {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

body.developers-page #main-content #frameworks-section .frameworks-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

body.developers-page #main-content #frameworks-section .framework-badge {
    justify-content: flex-start;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-color: var(--dev-section-line);
    border-radius: 0;
    background: var(--dev-card-bg);
    color: var(--dev-section-text);
}

body.developers-page #main-content #frameworks-section .framework-badge:hover {
    border-color: var(--dev-action);
    background: var(--dev-card-hover);
    transform: none;
    box-shadow: none;
}

body.developers-page #main-content #frameworks-section .framework-name {
    overflow-wrap: anywhere;
    color: var(--dev-section-text);
}

body.developers-page #main-content #frameworks-section .frameworks-count {
    margin: 1.25rem 0 0;
    color: var(--dev-section-muted);
    text-align: left;
}

body.developers-page #main-content #frameworks-section :is(.frameworks-label, .frameworks-link) {
    color: #8f301a;
}

body.developers-page #main-content #welcome-flower-section .welcome-flower-card {
    display: grid;
    grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border-color: var(--dev-section-line);
    border-radius: 0;
    background: var(--dev-card-bg);
}

body.developers-page #main-content #welcome-flower-section .welcome-flower-image {
    width: min(100%, 18rem);
    margin-inline: auto;
}

body.developers-page #main-content #welcome-flower-section .welcome-flower-info h2 {
    color: var(--dev-section-text);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
}

body.developers-page #main-content #welcome-flower-section :where(.welcome-flower-desc, .welcome-flower-how) {
    color: var(--dev-section-muted);
}

body.developers-page #main-content #welcome-flower-section .welcome-flower-glow {
    display: none;
}

body.developers-page #main-content #welcome-flower-section .welcome-flower-badge {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

body.developers-page #main-content #welcome-flower-section .welcome-flower-how code {
    color: #f07a58;
}

body.developers-page #main-content #testimonial-section .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.75rem;
}

body.developers-page #main-content #testimonial-section .testimonial-card {
    max-width: none;
    margin: 0;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    border-color: var(--dev-section-line);
    border-radius: 0;
    background: var(--dev-card-bg);
}

body.developers-page #main-content #testimonial-section .testimonial-quote {
    color: var(--dev-section-muted);
}

body.developers-page #main-content .compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    width: 100%;
    margin: 2.75rem 0 0;
}

body.developers-page #main-content .compliance-item {
    min-width: 0;
}

/* Quickstart ------------------------------------------------------------- */

body.developers-page #main-content #quickstart-section .quickstart-tabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    margin: 3rem 0 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--dev-section-line);
}

body.developers-page #main-content #quickstart-section .qs-tab {
    flex: 0 0 auto;
    min-height: 3rem;
    padding: 0.85rem 1.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--dev-section-muted);
    text-align: left;
}

body.developers-page #main-content #quickstart-section .qs-tab.active {
    border-bottom-color: var(--dev-action);
    background: rgba(255, 255, 255, 0.04);
    color: var(--dev-section-text);
}

body.developers-page #main-content #quickstart-section .qs-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--dev-section-line);
    border-top: 0;
    border-radius: 0;
    background: #10192b;
}

body.developers-page #main-content #quickstart-section .qs-steps {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.developers-page #main-content #quickstart-section .qs-step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1.25rem;
    width: 100%;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--dev-section-line);
}

body.developers-page #main-content #quickstart-section .qs-step:first-child {
    padding-top: 0;
}

body.developers-page #main-content #quickstart-section .qs-step:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body.developers-page #main-content #quickstart-section .qs-step-number {
    position: static;
    width: 3rem;
    height: 3rem;
    border-radius: 0;
    background: #b94223;
    color: #fff;
}

body.developers-page #main-content #quickstart-section .code-block {
    width: 100%;
    margin: 1rem 0 0;
    overflow-x: auto;
    border-color: rgba(103, 232, 249, 0.25);
    border-radius: 0;
    background: #080f1d;
    white-space: pre;
}

body.developers-page #main-content #quickstart-section .qs-advanced {
    border-radius: 0;
    background: #10192b;
}

/* Browse and live listing containment ----------------------------------- */

body.developers-page #main-content #categories-section .categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
    margin: 2.75rem 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.developers-page #main-content #categories-section .category-card {
    min-width: 0;
    border: 1px solid var(--dev-section-line);
    border-radius: 0;
    background: var(--dev-card-bg);
}

body.developers-page #main-content #categories-section .category-card:hover {
    border-color: var(--dev-action);
    background: var(--dev-card-hover);
}

body.developers-page #main-content #browse-section .browse-header {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 2rem;
    align-items: end;
    margin: 0 0 2rem;
}

body.developers-page #main-content #browse-section .browse-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

body.developers-page #main-content #browse-section .filter-select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    border-color: var(--dev-section-line);
    border-radius: 0;
    background: var(--dev-paper-bright);
    color: var(--dev-ink);
}

body.developers-page #main-content #browse-section .browse-results-copy {
    max-width: 54rem;
    color: var(--dev-section-muted);
}

body.developers-page #main-content #browse-section a:not(.btn) {
    color: #8f301a;
}

body.developers-page #main-content #browse-section .capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

body.developers-page #main-content #browse-section .capabilities-loading {
    grid-column: 1 / -1;
}

body.developers-page #main-content #browse-section .capability-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 1.35rem;
    overflow: hidden;
    border-radius: 0;
    background: var(--dev-paper-bright);
    color: var(--dev-ink);
    box-shadow: none;
}

body.developers-page #main-content #browse-section .capability-card:hover {
    background: var(--dev-paper);
    transform: none;
    box-shadow: none;
}

body.developers-page #main-content #browse-section .listing-badge {
    top: 0.8rem;
    right: 0.8rem;
    max-width: calc(100% - 1.6rem);
    border-radius: 999px;
    white-space: normal;
    text-align: center;
}

body.developers-page #main-content #browse-section .listing-badge + .cap-header {
    padding-top: 1.65rem;
}

body.developers-page #main-content #browse-section .cap-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    width: 100%;
}

body.developers-page #main-content #browse-section .cap-header > :first-child,
body.developers-page #main-content #browse-section .cap-seller {
    min-width: 0;
}

body.developers-page #main-content #browse-section .cap-seller {
    flex-wrap: wrap;
    color: #5c6477;
}

body.developers-page #main-content #browse-section .cap-price {
    align-self: start;
}

body.developers-page #main-content #browse-section .cap-description {
    color: var(--dev-ink-soft);
}

body.developers-page #main-content #browse-section .cap-tags {
    margin-bottom: 1rem;
}

body.developers-page #main-content #browse-section .cap-tag,
body.developers-page #main-content #browse-section .cap-category-badge {
    border-color: rgba(12, 18, 34, 0.18);
    background: var(--dev-paper-muted);
    color: #4e576b;
}

body.developers-page #main-content #browse-section .cap-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-color: rgba(12, 18, 34, 0.16);
}

body.developers-page #main-content #browse-section .cap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    width: 100%;
    max-width: 100%;
    color: #5c6477;
}

body.developers-page #main-content #browse-section .cap-stat,
body.developers-page #main-content #browse-section .verif-badge,
body.developers-page #main-content #browse-section .trust-badge-sm {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.developers-page #main-content #browse-section .cap-category-badge {
    justify-self: start;
}

/* Process and dashboard -------------------------------------------------- */

body.developers-page #main-content #how-section .how-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 2.75rem 0 0;
    border: 1px solid var(--dev-section-line);
}

body.developers-page #main-content #how-section .how-step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    align-content: start;
    padding: 1.5rem;
    border: 0;
    border-right: 1px solid var(--dev-section-line);
}

body.developers-page #main-content #how-section .how-step:last-child {
    border-right: 0;
}

body.developers-page #main-content #how-section .how-step + .how-step::before {
    display: none;
}

body.developers-page #main-content #how-section .how-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0;
    color: #8f301a;
}

body.developers-page #main-content #how-section .how-code {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    border-radius: 0;
    color: #f07a58;
    white-space: normal;
}

body.developers-page #main-content #dashboard-section .dashboard-placeholder,
body.developers-page #main-content #dashboard-section .dashboard-content {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.developers-page #main-content #dashboard-section .dashboard-cta-card,
body.developers-page #main-content #dashboard-section .glass-panel {
    border-radius: 0;
    background: var(--dev-card-bg);
    box-shadow: none;
}

body.developers-page #main-content #dashboard-section .dashboard-cta-card {
    max-width: 42rem;
    margin: 2.5rem 0 0;
    text-align: left;
}

body.developers-page #main-content #dashboard-section .dashboard-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.developers-page #main-content #dashboard-section .dashboard-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.developers-page #main-content #dashboard-section .dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Legacy contextual directory: retain links, remove the floating inset card. */

body.developers-page .site-footer-context {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    border: 0;
    border-radius: 0;
    background: #111a2e;
    color: #eef2f8;
}

body.developers-page .site-footer-context .footer-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0 0 2.5rem;
}

body.developers-page .site-footer-context .footer-brand {
    max-width: 20rem;
}

body.developers-page .site-footer-context :where(.footer-tagline, .footer-bottom p) {
    color: #98a4ba;
}

body.developers-page .site-footer-context .footer-col h4 {
    color: #cbd5e1;
}

body.developers-page .site-footer-context .footer-col ul li {
    margin-bottom: 0.45rem;
}

body.developers-page .site-footer-context .footer-col ul li a {
    color: #98a4ba;
    font-size: 0.8rem;
    line-height: 1.45;
    text-decoration: none;
}

body.developers-page .site-footer-context .footer-col ul li a:hover {
    color: var(--dev-coral);
}

body.developers-page .site-footer-context .footer-bottom {
    gap: 1.5rem;
    border-color: rgba(255, 255, 255, 0.14);
}

body.developers-page .site-footer-context .footer-protocol-badge {
    border-color: rgba(255, 255, 255, 0.22);
    background: #172139;
    color: #cbd5e1;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
    body.developers-page #main-content #frameworks-section .frameworks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.developers-page #main-content #browse-section .capabilities-grid,
    body.developers-page #main-content #how-section .how-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.developers-page #main-content #how-section .how-step:nth-child(2n) {
        border-right: 0;
    }

    body.developers-page #main-content #how-section .how-step:nth-child(-n + 2) {
        border-bottom: 1px solid var(--dev-section-line);
    }

    body.developers-page #main-content #dashboard-section .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.developers-page #main-content #hero {
        background: var(--dev-paper);
    }

    body.developers-page #main-content #hero .hero-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "proof"
            "stats";
        gap: 1rem;
        padding-top: clamp(4rem, 12vw, 6rem);
    }

    body.developers-page #main-content #hero .hero-title {
        max-width: 15ch;
        font-size: clamp(3rem, 10vw, 5rem);
    }

    body.developers-page #main-content #hero .hero-install {
        margin-top: 2rem;
    }

    body.developers-page #main-content #hero .hero-code-snippet {
        margin-top: 0.25rem;
    }

    body.developers-page #main-content > [data-answer-card="developers"] .section-header {
        grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1.65fr);
    }

    body.developers-page #main-content > [data-answer-card="developers"] .section-badge {
        grid-column: 1;
    }

    body.developers-page #main-content > [data-answer-card="developers"] .section-title,
    body.developers-page #main-content > [data-answer-card="developers"] .section-subtitle,
    body.developers-page #main-content > [data-answer-card="developers"] .section-header > .hero-disclaimer {
        grid-column: 2;
        grid-row: auto;
    }

    body.developers-page #main-content #testimonial-section .testimonial-grid,
    body.developers-page #main-content #welcome-flower-section .welcome-flower-card,
    body.developers-page #main-content #browse-section .browse-header,
    body.developers-page #main-content #dashboard-section .dashboard-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    body.developers-page #main-content #welcome-flower-section .welcome-flower-image {
        width: min(70vw, 18rem);
        margin: 0;
    }

    body.developers-page .site-footer-context .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.developers-page .site-footer-context .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    body.developers-page #main-content #hero .hero-content {
        width: calc(100% - 2rem);
        padding-block: 3.5rem 3rem;
    }

    body.developers-page #main-content #hero .hero-title {
        max-width: none;
        font-size: clamp(2.55rem, 13vw, 4rem);
        line-height: 0.98;
        overflow-wrap: normal;
    }

    body.developers-page #main-content #hero .hero-actions,
    body.developers-page #main-content #hero .hero-actions > :where(a, button),
    body.developers-page #main-content #hero .welcome-flower-actions > :where(a, button) {
        width: 100%;
    }

    body.developers-page #main-content #hero .hero-actions {
        align-items: stretch;
    }

    body.developers-page #main-content #hero .hero-actions > :where(a, button) {
        justify-content: center;
    }

    body.developers-page #main-content #hero .install-row {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
    }

    body.developers-page #main-content #hero .install-label,
    body.developers-page #main-content #hero .install-hint {
        grid-column: 1 / -1;
    }

    body.developers-page #main-content #hero .install-cmd {
        grid-column: 1;
    }

    body.developers-page #main-content #hero .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.developers-page #main-content #hero .hero-stat + .hero-stat {
        border-left: 0;
    }

    body.developers-page #main-content #hero .hero-stat:nth-child(even) {
        border-left: 1px solid rgba(12, 18, 34, 0.16);
    }

    body.developers-page #main-content #hero .hero-stat:nth-child(n + 3) {
        border-top: 1px solid rgba(12, 18, 34, 0.16);
    }

    body.developers-page #main-content #hero .hero-stat:last-child {
        grid-column: 1 / -1;
    }

    body.developers-page #main-content > .section {
        padding-block: 3.75rem;
    }

    body.developers-page #main-content > .section > .container,
    body.developers-page .site-footer-context > .container {
        width: calc(100% - 2rem);
    }

    body.developers-page #main-content .section-title {
        max-width: none;
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    body.developers-page #main-content > [data-answer-card="developers"] .section-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    body.developers-page #main-content > [data-answer-card="developers"] .section-badge,
    body.developers-page #main-content > [data-answer-card="developers"] .section-title,
    body.developers-page #main-content > [data-answer-card="developers"] .section-subtitle,
    body.developers-page #main-content > [data-answer-card="developers"] .section-header > .hero-disclaimer {
        grid-column: 1;
    }

    body.developers-page #main-content .trust-grid,
    body.developers-page #main-content .compliance-grid,
    body.developers-page #main-content #testimonial-section .testimonial-grid,
    body.developers-page #main-content #browse-section .capabilities-grid,
    body.developers-page #main-content #how-section .how-grid,
    body.developers-page #main-content #dashboard-section .dashboard-stats-grid,
    body.developers-page #main-content #dashboard-section .dashboard-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    body.developers-page #main-content #frameworks-section .frameworks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.developers-page #main-content .references {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 1.35rem;
    }

    body.developers-page #main-content #quickstart-section .quickstart-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible;
        margin-top: 2rem;
    }

    body.developers-page #main-content #quickstart-section .qs-tab {
        min-width: 0;
        padding-inline: 0.5rem;
        text-align: center;
        white-space: normal;
    }

    body.developers-page #main-content #quickstart-section .qs-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    body.developers-page #main-content #how-section .how-step,
    body.developers-page #main-content #how-section .how-step:nth-child(2n),
    body.developers-page #main-content #how-section .how-step:nth-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--dev-section-line);
    }

    body.developers-page #main-content #how-section .how-step:last-child {
        border-bottom: 0;
    }

    body.developers-page #main-content #browse-section .browse-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    body.developers-page #main-content #browse-section .cap-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    body.developers-page #main-content .welcome-flower-actions,
    body.developers-page #main-content .trust-cta-row {
        align-items: stretch;
    }

    body.developers-page #main-content .welcome-flower-actions > :where(a, button),
    body.developers-page #main-content .trust-cta-row > :where(a, button) {
        width: 100%;
        justify-content: center;
    }

    body.developers-page .site-footer-context .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.developers-page .site-footer-context .footer-brand {
        grid-column: auto;
    }

    body.developers-page .site-footer-context .footer-bottom {
        align-items: flex-start;
        text-align: left;
    }

    body.developers-page .site-footer-context .footer-protocols {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.developers-page #main-content *,
    body.developers-page #main-content *::before,
    body.developers-page #main-content *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    body.developers-page #main-content #hero,
    body.developers-page #main-content > .section,
    body.developers-page #main-content :where(.trust-card, .capability-card, .testimonial-card, .welcome-flower-card),
    body.developers-page .site-footer-context {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

@media print {
    body.developers-page #main-content #hero,
    body.developers-page #main-content > .section,
    body.developers-page .site-footer-context {
        --dev-section-bg: #fff !important;
        --dev-section-text: #000 !important;
        --dev-section-muted: #222 !important;
        --dev-section-line: #777 !important;
        --dev-card-bg: #fff !important;
        --dev-card-hover: #fff !important;
        --dev-action: #8f301a !important;
        --dev-action-hover: #8f301a !important;
        --text-primary: #000 !important;
        --text-secondary: #222 !important;
        --text-muted: #333 !important;
        --text-link: #8f301a !important;
        --accent: #8f301a !important;
        --accent-hover: #8f301a !important;
        background: #fff !important;
        color: #000 !important;
        color-scheme: light;
    }

    body.developers-page #main-content #hero .hero-proof {
        --text-muted: #333 !important;
    }

    body.developers-page #main-content :where(
        .hero-install,
        .hero-code-snippet,
        .snippet-header,
        .qs-panel,
        .qs-advanced,
        .code-block,
        .how-code
    ) {
        border-color: #777 !important;
        background: #fff !important;
        color: #000 !important;
    }

    body.developers-page #main-content .discovery-url {
        color: #000 !important;
    }

    body.developers-page #main-content :where(.btn-primary, .qs-step-number, .welcome-flower-badge),
    body.developers-page .site-footer-context .footer-protocol-badge {
        border-color: #777 !important;
        background: #fff !important;
        color: #000 !important;
    }

    body.developers-page #main-content :where(
        .hero-install,
        .hero-code-snippet,
        .qs-panel,
        .qs-advanced,
        .code-block,
        .how-code
    ) *,
    body.developers-page .site-footer-context * {
        color: #000 !important;
    }

    body.developers-page #main-content #hero .hero-content {
        display: block;
        padding-block: 2rem;
    }
}