/* ==========================================================================
   Site 6 developer pages: /automate-links-api, /mcp-server, /cli
   (landing-pages/{developer-api,mcp-server,cli-tool}-6.php).

   Loads after the shared kit (css/the25-landing6.css). Same tokens and type
   as home-6, plus a developer flavour: set code panels (navy, system mono,
   syntax colours from the palette), a terminal, an AI chat window, an
   endpoint explorer and a command reference. Everything is scoped under
   .l6-page--dev. Behaviour: js/the25-site6-dev.js (tabs, copy, typing).
   Code panels scroll horizontally inside themselves; the page never does.
   ========================================================================== */

.l6-page--dev {
    --dv-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "DM Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --dv-code-bg: #0a1430;
    --dv-code-bar: #0d1937;
    --dv-code-line: rgba(143, 192, 255, 0.16);
    --dv-code-text: #dce6f6;
    --dv-code-muted: #8794ad;
    --dv-term-bg: #081025;
}

/* Screen-reader only (copy confirmations) */
.l6-page--dev .dv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Syntax colours (DevCode helper tokens) ----------------------------- */

.l6-page--dev .tk-c { color: var(--dv-code-muted); font-style: italic; }
.l6-page--dev .tk-s { color: var(--l6-mint); }
.l6-page--dev .tk-n { color: var(--l6-amber); }
.l6-page--dev .tk-k { color: var(--l6-sky); }
.l6-page--dev .tk-p { color: var(--l6-link-on-dark); }
.l6-page--dev .tk-f { color: #ff9a9e; }
.l6-page--dev .tk-v { color: #ff9a9e; }
.l6-page--dev .tk-u { color: #c4dcff; }
.l6-page--dev .tk-o { color: var(--dv-code-muted); }

/* ---- Buttons, install chip, hero notes ----------------------------------- */

/* Developer H1s carry a product name plus the promise: one step smaller */
.l6-page--dev .l6-hero .l6-display {
    font-size: clamp(2.4rem, 3.8vw, 3.9rem);
}

.l6-page--dev .dv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px !important;
    padding: 6px 14px 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    letter-spacing: 0;
}

.l6-page--dev .dv-kicker img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.l6-page--dev .dv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.l6-page--dev .dv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 1.5px solid var(--l6-blue);
    border-radius: 12px;
    background: var(--l6-blue);
    color: #fff;
    font-family: var(--l6-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.l6-page--dev .dv-btn:hover {
    border-color: var(--l6-blue-deep);
    background: var(--l6-blue-deep);
    color: #fff;
}

.l6-page--dev .dv-btn i {
    transition: transform 160ms ease;
}

.l6-page--dev .dv-btn:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Hero buttons get the form's hard shadow: the hero's one neo-brutal touch */
.l6-page--dev .l6-hero .dv-btn:not(.dv-btn--ghost) {
    border-color: #fff;
    box-shadow: 4px 4px 0 var(--l6-sky);
}

.l6-page--dev .dv-btn--ghost {
    border-color: rgba(13, 27, 46, 0.24);
    background: transparent;
    color: var(--l6-ink);
}

.l6-page--dev .dv-btn--ghost:hover {
    border-color: var(--l6-ink);
    background: transparent;
    color: var(--l6-ink);
}

.l6-page--dev .l6-hero .dv-btn--ghost,
.l6-page--dev .dv-on-dark .dv-btn--ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.l6-page--dev .l6-hero .dv-btn--ghost:hover,
.l6-page--dev .dv-on-dark .dv-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* One-line command with a copy button */
.l6-page--dev .dv-install {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 52px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--dv-code-line);
    border-radius: 12px;
    background: var(--dv-code-bg);
    color: var(--dv-code-text);
    font-family: var(--dv-mono);
    font-size: 0.9rem;
}

.l6-page--dev .l6-hero .dv-install {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(4, 10, 28, 0.55);
}

.l6-page--dev .dv-install--hero {
    max-width: 480px;
    margin-top: 16px;
}

.l6-page--dev .dv-install code {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    scrollbar-width: none;
}

.l6-page--dev .dv-install code::-webkit-scrollbar {
    display: none;
}

.l6-page--dev .dv-install .dv-ps {
    color: var(--l6-mint);
    user-select: none;
}

.l6-page--dev .dv-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
}

.l6-page--dev .dv-notes li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.l6-page--dev .dv-notes i {
    color: var(--l6-mint);
    font-size: 0.8rem;
}

.l6-page--dev .dv-notes a {
    color: var(--l6-link-on-dark);
}

/* ---- Copy button ---------------------------------------------------------- */

.l6-page--dev .dv-copy {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 36px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--dv-code-text);
    font-family: var(--l6-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.l6-page--dev .dv-copy:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
}

.l6-page--dev .dv-copy.is-copied {
    border-color: rgba(94, 224, 160, 0.5);
    color: var(--l6-mint);
}

.l6-page--dev .dv-copy.is-copied i {
    font-weight: 900;
}

.l6-page--dev .dv-copy.is-copied i::before {
    content: "\f00c";
}

.l6-page--dev .dv-copy:focus-visible {
    outline: 3px solid rgba(94, 168, 255, 0.6);
    outline-offset: 2px;
}

/* ==========================================================================
   Code panel: bar (title or tabs + copy) and one or more <pre> panels
   ========================================================================== */

.l6-page--dev .dv-code {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--dv-code-line);
    border-radius: 18px;
    background: var(--dv-code-bg);
    color: var(--dv-code-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 28px 60px -28px rgba(11, 23, 52, 0.55);
}

.l6-page--dev .l6-hero .dv-code {
    border-color: rgba(255, 255, 255, 0.14);
    background: #0b1633;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.l6-page--dev .dv-code-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--dv-code-line);
    background: var(--dv-code-bar);
}

.l6-page--dev .dv-code-title {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    color: var(--dv-code-text);
    font-family: var(--dv-mono);
    font-size: 0.8rem;
    white-space: nowrap;
}

.l6-page--dev .dv-code-title span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.l6-page--dev .dv-code-title small {
    color: var(--dv-code-muted);
    font-size: inherit;
}

.l6-page--dev .dv-dots {
    display: inline-flex;
    flex: none;
    gap: 6px;
}

.l6-page--dev .dv-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--l6-coral);
}

.l6-page--dev .dv-dots i:nth-child(2) { background: var(--l6-amber); }
.l6-page--dev .dv-dots i:nth-child(3) { background: var(--l6-mint); }

/* Tabs inside a code bar (scroll sideways when they do not fit) */
.l6-page--dev .dv-tablist {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
    margin-bottom: -1px;
    overflow-x: auto;
    scrollbar-width: none;
}

.l6-page--dev .dv-tablist::-webkit-scrollbar {
    display: none;
}

.l6-page--dev .dv-tab {
    flex: none;
    min-height: 50px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: rgba(220, 230, 246, 0.66);
    font-family: var(--dv-mono);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.l6-page--dev .dv-tab:hover {
    color: #fff;
}

.l6-page--dev .dv-tab[aria-selected="true"] {
    border-bottom-color: var(--l6-sky);
    color: #fff;
}

.l6-page--dev .dv-tab:focus-visible {
    outline: 2px solid var(--l6-sky);
    outline-offset: -4px;
}

/* Without JS every panel shows, each under its own label */
.l6-page--dev .dv-panel-label {
    display: block;
    padding: 14px 20px 0;
    color: var(--dv-code-muted);
    font-family: var(--dv-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.l6-page--dev [data-dv-tabs].is-ready .dv-panel-label {
    display: none;
}

.l6-page--dev [data-dv-tabs]:not(.is-ready) > .dv-code-bar .dv-tablist {
    visibility: hidden;
}

.l6-page--dev [data-dv-panel][hidden] {
    display: none !important;
}

/* "Where this goes" caption above a config sample */
.l6-page--dev .dv-panel-file {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 14px 20px 0;
    color: var(--dv-code-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.l6-page--dev .dv-panel-file i {
    margin-top: 3px;
    color: var(--l6-sky);
}

.l6-page--dev .dv-pre {
    margin: 0;
    padding: 18px 20px 20px;
    overflow-x: auto;
    color: var(--dv-code-text);
    font-family: var(--dv-mono);
    font-size: 0.84rem;
    line-height: 1.7;
    white-space: pre;
    tab-size: 2;
    scrollbar-color: rgba(143, 192, 255, 0.3) transparent;
    scrollbar-width: thin;
}

.l6-page--dev .dv-pre code {
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: inherit;
}

.l6-page--dev .dv-pre::-webkit-scrollbar {
    height: 8px;
}

.l6-page--dev .dv-pre::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(143, 192, 255, 0.28);
}

.l6-page--dev .dv-pre--tall {
    max-height: 420px;
    overflow-y: auto;
}

/* A second block inside the same panel (response under a request) */
.l6-page--dev .dv-code-split {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 10px 0 20px;
    border-top: 1px solid var(--dv-code-line);
    background: var(--dv-code-bar);
    color: var(--dv-code-muted);
    font-family: var(--dv-mono);
    font-size: 0.78rem;
}

.l6-page--dev .dv-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--l6-mint);
}

.l6-page--dev .dv-status::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

/* HTTP method pills */
.l6-page--dev .dv-method {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(94, 168, 255, 0.16);
    color: var(--l6-sky);
    font-family: var(--dv-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.l6-page--dev .dv-method--get { background: rgba(94, 224, 160, 0.14); color: var(--l6-mint); }
.l6-page--dev .dv-method--put { background: rgba(255, 198, 107, 0.16); color: var(--l6-amber); }
.l6-page--dev .dv-method--delete { background: rgba(255, 107, 112, 0.16); color: #ff9a9e; }

/* Light-background variants of the pills (endpoint list on white) */
.l6-page--dev .dv-on-light .dv-method { background: #e5efff; color: var(--l6-blue-deep); }
.l6-page--dev .dv-on-light .dv-method--get { background: var(--l6-go-soft); color: #0b7a4d; }
.l6-page--dev .dv-on-light .dv-method--put { background: #fff3dc; color: var(--l6-amber-deep); }
.l6-page--dev .dv-on-light .dv-method--delete { background: var(--l6-stop-soft); color: #b42328; }

/* Inline code in copy (and no Bootstrap pink anywhere) */
.l6-page--dev code {
    color: inherit;
    font-family: var(--dv-mono);
}

.l6-page--dev .l6-ledger code,
.l6-page--dev p code,
.l6-page--dev li code,
.l6-page--dev td code,
.l6-page--dev th code,
.l6-page--dev blockquote code,
.l6-page--dev .l6-faq code {
    padding: 0.08em 0.38em;
    border-radius: 6px;
    background: #e9eef6;
    color: var(--l6-ink);
    font-family: var(--dv-mono);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}

.l6-page--dev .l6-hero p code,
.l6-page--dev .dv-on-dark p code,
.l6-page--dev .dv-on-dark li code {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* "Example data" chip over dark visuals */
.l6-page--dev .dv-sample {
    display: inline-block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.l6-page--dev .dv-sample--light {
    color: var(--l6-muted);
}

/* ==========================================================================
   Hero visual column
   ========================================================================== */

.l6-page--dev .dv-hero-visual {
    position: relative;
    min-width: 0;
}

.l6-page--dev .dv-hero-visual .dv-code + .dv-code {
    margin-top: 14px;
}

/* Floating result card (phone outcome) */
.l6-page--dev .dv-result {
    position: absolute;
    right: -14px;
    bottom: -26px;
    z-index: 2;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    width: min(300px, 80%);
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    color: var(--l6-body);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.5);
    font-size: 0.82rem;
    line-height: 1.35;
}

.l6-page--dev .dv-result img {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.l6-page--dev .dv-result b {
    overflow: hidden;
    color: var(--l6-ink);
    font-family: var(--dv-mono);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-result span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--l6-go);
    font-weight: 700;
}

/* ==========================================================================
   Terminal (CLI hero): typed commands, real CLI output formats
   ========================================================================== */

.l6-page--dev .dv-term {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: var(--dv-term-bg);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65);
}

.l6-page--dev .dv-term-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #0c1631;
}

.l6-page--dev .dv-term-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--dv-code-muted);
    font-family: var(--dv-mono);
    font-size: 0.78rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-term-replay {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--dv-code-muted);
    cursor: pointer;
}

.l6-page--dev .dv-term-replay:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.l6-page--dev .dv-term-replay[hidden] {
    display: none;
}

.l6-page--dev .dv-term-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 452px;
    padding: 18px 20px 20px;
    overflow: hidden;
    color: #b9c5da;
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    line-height: 1.62;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px);
    mask-image: linear-gradient(180deg, transparent 0, #000 44px);
}

.l6-page--dev .dv-tl {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.l6-page--dev .dv-tl.is-pending {
    display: none;
}

.l6-page--dev .dv-tl--cmd {
    margin-top: 10px;
    color: #fff;
}

.l6-page--dev .dv-tl--cmd:first-child {
    margin-top: 0;
}

.l6-page--dev .dv-tl .dv-ps {
    color: var(--l6-mint);
    user-select: none;
}

.l6-page--dev .dv-tl .dv-ok { color: var(--l6-mint); }
.l6-page--dev .dv-tl .dv-dim { color: var(--dv-code-muted); }
.l6-page--dev .dv-tl .dv-hi { color: #fff; font-weight: 700; }
.l6-page--dev .dv-tl .dv-link { color: #7fd8ff; }

.l6-page--dev .dv-caret {
    display: inline-block;
    width: 0.6em;
    height: 1.15em;
    margin-left: 1px;
    vertical-align: -0.2em;
    background: var(--l6-mint);
    animation: dv-blink 1.05s steps(1) infinite;
}

@keyframes dv-blink {
    50% { opacity: 0; }
}

/* ==========================================================================
   AI chat window (MCP hero): prompt, tool calls, answer with a deep link
   ========================================================================== */

.l6-page--dev .dv-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
    color: var(--l6-body);
    font-family: var(--l6-ui);
}

.l6-page--dev .dv-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--l6-line);
}

.l6-page--dev .dv-chat-head img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.l6-page--dev .dv-chat-head b {
    color: var(--l6-ink);
    font-size: 0.92rem;
}

.l6-page--dev .dv-connected {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--l6-go-soft);
    color: #0b7a4d;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.l6-page--dev .dv-connected::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--l6-go);
    content: "";
}

.l6-page--dev .dv-chat-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 430px;
    padding: 18px 18px 8px;
    overflow: hidden;
}

.l6-page--dev .dv-scene {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.l6-page--dev .dv-scene[hidden] {
    display: none;
}

.l6-page--dev .dv-step.is-pending {
    display: none;
}

.l6-page--dev .dv-msg {
    max-width: 88%;
    font-size: 0.88rem;
    line-height: 1.5;
}

.l6-page--dev .dv-msg--user {
    align-self: flex-end;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    background: var(--l6-blue);
    color: #fff;
    overflow-wrap: anywhere;
}

.l6-page--dev .dv-msg--ai {
    align-self: flex-start;
    color: var(--l6-ink);
}

.l6-page--dev .dv-msg--ai p + p {
    margin-top: 6px;
}

.l6-page--dev .dv-deeplink {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 8px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    background: var(--l6-haze);
    font-size: 0.82rem;
}

.l6-page--dev .dv-deeplink img {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
}

.l6-page--dev .dv-deeplink b {
    white-space: nowrap;
    color: var(--l6-blue-deep);
    font-family: var(--dv-mono);
    font-size: 0.82rem;
}

.l6-page--dev .dv-deeplink span {
    color: var(--l6-go);
    font-weight: 700;
}

/* Tool call card */
.l6-page--dev .dv-tool {
    align-self: stretch;
    overflow: hidden;
    border: 1px solid var(--l6-line);
    border-radius: 14px;
    background: var(--l6-haze);
}

.l6-page--dev .dv-tool-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--l6-muted);
    font-size: 0.76rem;
}

.l6-page--dev .dv-tool-head i {
    color: var(--l6-blue);
}

.l6-page--dev .dv-tool-head code {
    color: var(--l6-ink);
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    font-weight: 700;
}

.l6-page--dev .dv-tool-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #0b7a4d;
    font-weight: 700;
}

.l6-page--dev .dv-tool-state .dv-spin {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(9, 103, 242, 0.25);
    border-top-color: var(--l6-blue);
    border-radius: 50%;
    animation: dv-spin 0.8s linear infinite;
}

.l6-page--dev .dv-tool.is-running .dv-tool-state {
    color: var(--l6-blue);
}

.l6-page--dev .dv-tool.is-running .dv-spin {
    display: inline-block;
}

.l6-page--dev .dv-tool.is-running .dv-done {
    display: none;
}

.l6-page--dev .dv-tool .dv-running {
    display: none;
}

.l6-page--dev .dv-tool.is-running .dv-running {
    display: inline;
}

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

.l6-page--dev .dv-tool pre {
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--dv-code-bg);
    color: var(--dv-code-text);
    font-family: var(--dv-mono);
    font-size: 0.74rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.l6-page--dev .dv-typing {
    display: none;
    gap: 4px;
    align-self: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--l6-haze);
}

.l6-page--dev .dv-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9aa6b8;
    animation: dv-dot 1s ease-in-out infinite;
}

.l6-page--dev .dv-typing i:nth-child(2) { animation-delay: 0.15s; }
.l6-page--dev .dv-typing i:nth-child(3) { animation-delay: 0.3s; }

.l6-page--dev .dv-typing.is-on {
    display: inline-flex;
}

@keyframes dv-dot {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(-3px); }
}

.l6-page--dev .dv-chat-compose {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 14px 14px;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--l6-line);
    border-radius: 14px;
    color: #8892a3;
    font-size: 0.86rem;
}

.l6-page--dev .dv-chat-compose i {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--l6-ink);
    color: #fff;
    font-size: 0.75rem;
}

/* Scenario picks under the chat */
.l6-page--dev .dv-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.l6-page--dev .dv-picks button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--l6-text);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.l6-page--dev .dv-picks button:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.l6-page--dev .dv-picks button[aria-pressed="true"] {
    border-color: #fff;
    background: #fff;
    color: var(--l6-ink);
}

.l6-page--dev .dv-picks-label {
    width: 100%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

/* ==========================================================================
   "Works with" strip (white, under the hero)
   ========================================================================== */

.l6-page--dev .dv-strip {
    border-bottom: 1px solid var(--l6-line);
    background: var(--l6-paper);
}

.l6-page--dev .dv-strip .l6-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
    padding: 22px 0;
}

.l6-page--dev .dv-strip-label {
    flex: none;
    color: var(--l6-muted);
    font-size: 0.92rem;
}

.l6-page--dev .dv-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-strip li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--l6-ink);
    font-size: 0.96rem;
    font-weight: 700;
}

.l6-page--dev .dv-strip li img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.l6-page--dev .dv-strip li i {
    width: 22px;
    color: var(--l6-blue);
    font-size: 1.05rem;
    text-align: center;
}

.l6-page--dev .dv-mono-badge {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--l6-ink);
    color: #fff;
    font-family: var(--dv-mono);
    font-size: 0.62rem;
    font-weight: 700;
}

/* ==========================================================================
   Endpoint explorer (API page): list of endpoints + request/response
   ========================================================================== */

.l6-page--dev .dv-explorer {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 28px;
    align-items: start;
}

.l6-page--dev .dv-ep-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 100px;
}

.l6-page--dev .dv-ep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--l6-ink);
    font-family: var(--l6-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.l6-page--dev .dv-ep:hover {
    background: var(--l6-haze);
}

.l6-page--dev .dv-ep[aria-selected="true"] {
    border-color: var(--l6-ink);
    background: #fff;
    box-shadow: 3px 3px 0 var(--l6-ink);
}

.l6-page--dev .dv-ep code {
    overflow: hidden;
    color: var(--l6-ink);
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-ep small {
    grid-column: 2;
    color: var(--l6-muted);
    font-size: 0.84rem;
    line-height: 1.3;
}

.l6-page--dev .dv-ep-panel h3 {
    margin: 0 0 8px;
    font-family: var(--l6-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.l6-page--dev .dv-ep-panel > p {
    max-width: 44em;
    font-size: 0.98rem;
}

.l6-page--dev .dv-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 18px;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-fields li {
    padding: 4px 9px;
    border: 1px solid var(--l6-line);
    border-radius: 8px;
    background: #fff;
    color: var(--l6-ink);
    font-family: var(--dv-mono);
    font-size: 0.76rem;
}

.l6-page--dev .dv-fields li.is-req {
    border-color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--dev .dv-fields li em {
    color: var(--l6-muted);
    font-style: normal;
    font-weight: 400;
}

.l6-page--dev .dv-ep-panel .dv-code + .dv-code {
    margin-top: 12px;
}

.l6-page--dev .dv-ep-more {
    margin-top: 14px !important;
    font-size: 0.92rem;
}

/* Parameter table (create link) */
.l6-page--dev .dv-params {
    width: 100%;
    margin: 26px 0 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.l6-page--dev .dv-params caption {
    caption-side: top;
    padding-bottom: 10px;
    color: var(--l6-ink);
    font-weight: 700;
    text-align: left;
}

.l6-page--dev .dv-params th,
.l6-page--dev .dv-params td {
    padding: 11px 12px 11px 0;
    border-top: 1px solid var(--l6-line);
    text-align: left;
    vertical-align: top;
}

.l6-page--dev .dv-params th {
    width: 34%;
    font-weight: 400;
}

.l6-page--dev .dv-params th code {
    font-weight: 700;
}

.l6-page--dev .dv-params td small {
    display: inline-block;
    margin-left: 6px;
    color: var(--l6-muted);
    font-family: var(--dv-mono);
    font-size: 0.74rem;
}

/* ==========================================================================
   Use-case tiles (API page): kit bento + small developer visuals
   ========================================================================== */

.l6-page--dev .dv-uc .l6-tile {
    min-height: 0;
}

.l6-page--dev .dv-uc-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-uc-tools li {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.l6-page--dev .l6-tile--dark .dv-uc-tools li {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Event -> API call -> link flow */
.l6-page--dev .dv-flowmini {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
}

.l6-page--dev .dv-flowmini li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    background: #fff;
    color: var(--l6-ink);
}

.l6-page--dev .dv-flowmini li + li::before {
    position: absolute;
    top: -9px;
    left: 22px;
    width: 2px;
    height: 8px;
    background: var(--l6-line);
    content: "";
}

.l6-page--dev .dv-flowmini code {
    padding: 0;
    background: none;
    font-family: var(--dv-mono);
    font-size: 0.78rem;
}

.l6-page--dev .dv-flowmini i {
    width: 18px;
    color: var(--l6-blue);
    text-align: center;
}

.l6-page--dev .dv-flowmini li:last-child {
    border-color: var(--l6-go);
    background: var(--l6-go-soft);
}

.l6-page--dev .dv-flowmini li:last-child i {
    color: var(--l6-go);
}

/* Mini sheet: long URL -> short link */
.l6-page--dev .dv-sheet {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: 0.76rem;
    table-layout: fixed;
}

.l6-page--dev .dv-sheet th,
.l6-page--dev .dv-sheet td {
    padding: 7px 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--l6-line);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-sheet th {
    background: var(--l6-haze);
    color: var(--l6-muted);
    font-weight: 700;
}

.l6-page--dev .dv-sheet tr:last-child td {
    border-bottom: 0;
}

.l6-page--dev .dv-sheet td:last-child {
    color: var(--l6-blue-deep);
    font-family: var(--dv-mono);
    font-weight: 700;
}

/* Per-recipient links */
.l6-page--dev .dv-recipients {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

.l6-page--dev .dv-recipients li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.l6-page--dev .dv-recipients code {
    padding: 0;
    background: none;
    overflow: hidden;
    color: var(--l6-link-on-dark);
    font-family: var(--dv-mono);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-recipients b {
    color: var(--l6-mint);
    font-size: 0.76rem;
}

/* QR + update call */
.l6-page--dev .dv-qrrow {
    display: flex;
    align-items: center;
    gap: 16px;
}

.l6-page--dev .dv-qrrow .l6-qr {
    flex: none;
    width: 104px;
}

.l6-page--dev .dv-qrrow ul {
    display: grid;
    flex: 1;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--dv-mono);
    font-size: 0.74rem;
}

.l6-page--dev .dv-qrrow li {
    overflow: hidden;
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-qrrow li s {
    color: var(--l6-muted);
}

.l6-page--dev .dv-qrrow li:last-child {
    background: var(--l6-go-soft);
}

/* Share sheet (mobile apps tile) */
.l6-page--dev .dv-share {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.l6-page--dev .dv-share li {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 12px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.l6-page--dev .dv-share img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

/* Small bits inside tiles */
.l6-page--dev .dv-tile-code {
    margin-top: 12px !important;
}

.l6-page--dev .l6-tile--dark .dv-tile-code code {
    padding: 0;
    background: none;
    color: var(--l6-link-on-dark);
    font-size: 0.8rem;
}

.l6-page--dev .dv-tile-token {
    display: block;
    width: 84px;
    height: 84px;
    margin-left: auto;
    object-fit: contain;
}

.l6-page--dev pre.dv-headers {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.l6-page--dev .l6-tile--dark p a {
    color: var(--l6-link-on-dark);
}

.l6-page--dev .dv-share-cap {
    margin-bottom: 10px !important;
    color: var(--l6-muted);
    font-size: 0.84rem;
}

.l6-page--dev pre.dv-headers code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.l6-page--dev .dv-two--more {
    margin-top: clamp(48px, 6vw, 80px);
    align-items: center;
}

/* ==========================================================================
   Zapier section: a Zap built from steps + webhook payloads
   ========================================================================== */

.l6-page--dev .dv-zap {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-zap > li {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px -18px rgba(13, 27, 46, 0.3);
}

.l6-page--dev .dv-zap > li + li {
    margin-top: 26px;
}

.l6-page--dev .dv-zap > li + li::before {
    position: absolute;
    top: -26px;
    left: 39px;
    width: 2px;
    height: 26px;
    background: repeating-linear-gradient(180deg, var(--l6-blue) 0 4px, transparent 4px 8px);
    content: "";
}

.l6-page--dev .dv-zap-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--l6-haze);
    color: var(--l6-blue);
    font-size: 1.1rem;
}

.l6-page--dev .dv-zap-ico img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.l6-page--dev .dv-zap small {
    display: block;
    color: var(--l6-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.l6-page--dev .dv-zap b {
    display: block;
    color: var(--l6-ink);
    font-size: 0.98rem;
}

.l6-page--dev .dv-zap dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    margin: 10px 0 0;
    font-size: 0.8rem;
}

.l6-page--dev .dv-zap dt {
    color: var(--l6-muted);
    font-weight: 400;
}

.l6-page--dev .dv-zap dd {
    margin: 0;
    overflow: hidden;
    color: var(--l6-ink);
    font-family: var(--dv-mono);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--dev .dv-zap .is-out {
    border-color: var(--l6-go);
}

.l6-page--dev .dv-zap .is-out .dv-zap-ico {
    background: var(--l6-go-soft);
    color: var(--l6-go);
}

.l6-page--dev .dv-col-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-family: var(--l6-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.l6-page--dev .dv-col-head img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.l6-page--dev .dv-col-lead {
    margin-bottom: 20px !important;
}

.l6-page--dev .dv-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

/* ==========================================================================
   Facts tiles (auth, rate limits, responses)
   ========================================================================== */

.l6-page--dev .dv-headers {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--dv-code-bg);
    color: var(--dv-code-text);
    font-family: var(--dv-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    list-style: none;
    overflow-x: auto;
}

.l6-page--dev .dv-headers li {
    white-space: nowrap;
}

.l6-page--dev .dv-headers b {
    color: var(--l6-link-on-dark);
    font-weight: 400;
}

.l6-page--dev .dv-headers em {
    color: var(--l6-amber);
    font-style: normal;
}

/* ==========================================================================
   MCP: tool catalogue, prompt cards, architecture, env table
   ========================================================================== */

/* One row per group: name + what it covers, then the tools as small tiles */
.l6-page--dev .dv-toolcat {
    display: grid;
    gap: 0;
}

.l6-page--dev .dv-group {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 14px 32px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.l6-page--dev .dv-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: #fff;
    font-family: var(--l6-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.l6-page--dev .dv-group h3 i {
    width: 18px;
    color: var(--l6-sky);
    text-align: center;
}

.l6-page--dev .dv-group h3 span {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(94, 168, 255, 0.16);
    color: var(--l6-sky);
    font-family: var(--dv-mono);
    font-size: 0.72rem;
}

.l6-page--dev .dv-group-text {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    line-height: 1.45;
}

.l6-page--dev .dv-group ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-group li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.l6-page--dev .dv-group li code {
    padding: 0;
    background: none;
    color: var(--l6-mint);
    font-family: var(--dv-mono);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.l6-page--dev .dv-group li span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    line-height: 1.35;
}

.l6-page--dev .dv-safety {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 40px;
    margin-top: clamp(36px, 4vw, 52px);
}

.l6-page--dev .dv-panel-dark {
    padding: clamp(24px, 3.5vw, 44px);
    border-radius: 28px;
    background:
        radial-gradient(45% 60% at 92% 0%, rgba(9, 103, 242, 0.32), transparent 70%),
        var(--l6-navy);
    color: rgba(255, 255, 255, 0.74);
}

.l6-page--dev .dv-panel-dark-head {
    display: flex;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 26px;
}

.l6-page--dev .dv-panel-dark-head p {
    max-width: 30em;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.45;
}

.l6-page--dev .dv-panel-dark-head b {
    color: #fff;
    font-family: var(--l6-display);
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Prompt cards */
.l6-page--dev .dv-prompts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.l6-page--dev .dv-prompt {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--l6-line);
    border-radius: 22px;
    background: #fff;
}

.l6-page--dev .dv-prompt blockquote {
    position: relative;
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px 16px 16px 4px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 0.98rem;
    line-height: 1.5;
}

.l6-page--dev .dv-prompt h3 {
    margin: 0;
    font-family: var(--l6-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.l6-page--dev .dv-calls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

.l6-page--dev .dv-calls li:first-child {
    margin-right: 4px;
    color: var(--l6-muted);
}

.l6-page--dev .dv-calls code {
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--dv-code-bg);
    color: var(--l6-mint);
    font-family: var(--dv-mono);
    font-size: 0.76rem;
}

/* Architecture: client <-> server on your machine <-> API */
.l6-page--dev .dv-arch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.1fr) 120px minmax(0, 1fr);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-arch-node {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px 14px;
    border: 1px solid var(--l6-line);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.l6-page--dev .dv-arch-node img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.l6-page--dev .dv-arch-node b {
    color: var(--l6-ink);
    font-size: 1rem;
}

.l6-page--dev .dv-arch-node span {
    color: var(--l6-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.l6-page--dev .dv-arch-node--you {
    border: 1.5px dashed rgba(9, 103, 242, 0.45);
    background: #f5f9ff;
}

.l6-page--dev .dv-arch-node--you em {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e5efff;
    color: var(--l6-blue-deep);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
}

.l6-page--dev .dv-arch-wire {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 0 6px;
    color: var(--l6-muted);
    font-family: var(--dv-mono);
    font-size: 0.72rem;
    text-align: center;
}

.l6-page--dev .dv-arch-wire::before {
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--l6-blue) 0 6px, transparent 6px 11px);
    content: "";
}

.l6-page--dev .dv-arch-wire i {
    color: var(--l6-blue);
}

/* A request travelling along each wire, both ways */
.l6-page--dev .dv-arch-wire::after {
    position: absolute;
    top: -3px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--l6-blue);
    box-shadow: 0 0 0 4px rgba(9, 103, 242, 0.15);
    content: "";
    animation: dv-packet 2.6s ease-in-out infinite;
}

.l6-page--dev .dv-arch-wire + .dv-arch-node + .dv-arch-wire::after {
    animation-delay: 0.9s;
}

@keyframes dv-packet {
    0%, 8%   { left: 6px; opacity: 0; }
    15%      { opacity: 1; }
    45%, 55% { left: calc(100% - 14px); opacity: 1; }
    85%      { opacity: 1; }
    92%, 100% { left: 6px; opacity: 0; }
}

/* Environment variables */
.l6-page--dev .dv-env {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.l6-page--dev .dv-env th,
.l6-page--dev .dv-env td {
    padding: 10px 12px 10px 0;
    border-top: 1px solid var(--l6-line);
    text-align: left;
    vertical-align: top;
}

.l6-page--dev .dv-env thead th {
    border-top: 0;
    color: var(--l6-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.l6-page--dev .dv-env tbody th {
    font-weight: 400;
    white-space: nowrap;
}

.l6-page--dev .dv-env tbody th code {
    font-weight: 700;
}

/* Compatibility chips */
.l6-page--dev .dv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--l6-line);
    border-radius: 999px;
    background: #fff;
    color: var(--l6-ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.l6-page--dev .dv-chips i {
    color: var(--l6-blue);
}

.l6-page--dev .dv-chips-label {
    margin-top: 22px !important;
    color: var(--l6-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

/* ==========================================================================
   CLI: command reference + credential order
   ========================================================================== */

.l6-page--dev .dv-cmdref {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 24px;
    align-items: start;
}

.l6-page--dev .dv-cmdgroups {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 100px;
}

.l6-page--dev .dv-cmdgroup {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--dv-mono);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.l6-page--dev .dv-cmdgroup:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.l6-page--dev .dv-cmdgroup[aria-selected="true"] {
    border-color: var(--l6-sky);
    background: rgba(94, 168, 255, 0.12);
    color: #fff;
}

.l6-page--dev .dv-cmdgroup i {
    width: 18px;
    color: var(--l6-sky);
    text-align: center;
}

.l6-page--dev .dv-cmdgroup span {
    margin-left: auto;
    color: var(--dv-code-muted);
    font-size: 0.74rem;
}

.l6-page--dev .dv-cmdpanel h3 {
    margin: 0 0 4px;
    color: #fff;
    font-family: var(--l6-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.l6-page--dev .dv-cmdpanel > p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.96rem;
}

.l6-page--dev .dv-cmds {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-cmds li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 24px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.l6-page--dev .dv-cmds li > code {
    padding: 0;
    background: none;
    color: #fff;
    font-family: var(--dv-mono);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.l6-page--dev .dv-cmds li > code b {
    color: var(--l6-mint);
    font-weight: 400;
}

.l6-page--dev .dv-cmds li > code em {
    color: var(--l6-amber);
    font-style: normal;
}

.l6-page--dev .dv-cmds p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.9rem;
    line-height: 1.45;
}

.l6-page--dev .dv-cmds .dv-flags {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--dev .dv-cmds .dv-flags li {
    display: block;
    padding: 3px 8px;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffb4b7;
    font-family: var(--dv-mono);
    font-size: 0.74rem;
}

.l6-page--dev .dv-cmdpanel .dv-code {
    margin-top: 18px;
}

/* Credential precedence ladder */
.l6-page--dev .dv-ladder {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dv-ladder;
}

.l6-page--dev .dv-ladder li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--l6-line);
    border-radius: 16px;
    background: #fff;
    counter-increment: dv-ladder;
}

.l6-page--dev .dv-ladder li::before {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--l6-ink);
    color: #fff;
    font-family: var(--l6-display);
    font-weight: 700;
    content: counter(dv-ladder);
}

.l6-page--dev .dv-ladder b {
    color: var(--l6-ink);
    font-size: 0.98rem;
}

.l6-page--dev .dv-ladder span {
    color: var(--l6-body);
    font-size: 0.86rem;
}

.l6-page--dev .dv-ladder code {
    font-size: 0.8rem;
}

/* ==========================================================================
   Steps with developer tokens (kit .l6-steps--cards + own token path)
   ========================================================================== */

.l6-page--dev .l6-steps--cards code {
    font-size: 0.82rem;
}

.l6-page--dev .dv-section-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

/* ==========================================================================
   Developer tool cards (partials/site6_devtools.php)
   ========================================================================== */

.l6-page--dev .dv-card-art {
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(9, 103, 242, 0.35), transparent 70%),
        var(--l6-navy);
}

.l6-page--dev .dv-card--docs .dv-card-art {
    background: linear-gradient(150deg, #e6f0ff, #f4f1ff);
}

.l6-page--dev .dv-card-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 40px);
    padding: 10px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    white-space: nowrap;
}

.l6-page--dev .dv-card-line i {
    color: var(--l6-sky);
}

.l6-page--dev .dv-card-line em {
    color: var(--l6-amber);
    font-style: normal;
}

.l6-page--dev .dv-card--docs .dv-card-line {
    border-color: var(--l6-line);
    background: var(--dv-code-bg);
}

/* ==========================================================================
   Final CTA (kit blue panel) with buttons instead of a link form
   ========================================================================== */

.l6-page--dev .dv-final-actions {
    display: grid;
    gap: 14px;
}

.l6-page--dev .dv-final-actions .dv-btn {
    justify-self: start;
    border-color: #fff;
    background: #fff;
    color: var(--l6-blue-deep);
    box-shadow: 4px 4px 0 var(--l6-ink);
}

.l6-page--dev .dv-final-actions .dv-btn:hover {
    background: #f1f6ff;
    color: var(--l6-blue-deep);
}

.l6-page--dev .dv-final-actions .dv-install {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(4, 22, 64, 0.35);
}

.l6-page--dev .dv-final-actions .dv-install .dv-ps {
    color: #b9f5d6;
}

.l6-page--dev .dv-final-note {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.88rem;
}

.l6-page--dev .dv-final-note a {
    color: #fff;
    font-weight: 700;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
    .l6-page--dev .dv-hero-visual {
        max-width: 760px;
    }

    .l6-page--dev .dv-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--dev .dv-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--dev .dv-prompts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l6-page--dev .dv-arch {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 520px;
    }

    .l6-page--dev .dv-arch-wire {
        min-height: 72px;
        align-content: center;
    }

    .l6-page--dev .dv-arch-wire::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        background: repeating-linear-gradient(180deg, var(--l6-blue) 0 6px, transparent 6px 11px);
    }

    .l6-page--dev .dv-arch-wire span,
    .l6-page--dev .dv-arch-wire i {
        position: relative;
        padding: 2px 8px;
        background: var(--l6-paper);
    }

    .l6-page--dev .dv-arch-wire::after {
        top: 6px;
        left: calc(50% - 3px);
        animation-name: dv-packet-v;
    }
}

@keyframes dv-packet-v {
    0%, 8%   { top: 6px; opacity: 0; }
    15%      { opacity: 1; }
    45%, 55% { top: calc(100% - 14px); opacity: 1; }
    85%      { opacity: 1; }
    92%, 100% { top: 6px; opacity: 0; }
}

@media (max-width: 1060px) {
    .l6-page--dev .dv-explorer,
    .l6-page--dev .dv-cmdref {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--dev .dv-ep-list,
    .l6-page--dev .dv-cmdgroups {
        position: static;
        flex-direction: row;
        margin: 0 -24px;
        padding: 4px 24px 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .l6-page--dev .dv-ep-list::-webkit-scrollbar,
    .l6-page--dev .dv-cmdgroups::-webkit-scrollbar {
        display: none;
    }

    .l6-page--dev .dv-ep-list,
    .l6-page--dev .dv-cmdgroups {
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
        mask-image: linear-gradient(90deg, #000 88%, transparent);
    }

    .l6-page--dev .dv-ep {
        flex: none;
        width: auto;
        max-width: 280px;
        border-color: var(--l6-line);
        background: #fff;
    }

    .l6-page--dev .dv-ep small {
        display: none;
    }

    .l6-page--dev .dv-cmdgroup {
        flex: none;
    }

}

@media (max-width: 900px) {
    .l6-page--dev .dv-cmds li {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--dev .dv-safety {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .l6-page--dev .dv-actions .dv-btn {
        flex: 1 1 100%;
    }

    .l6-page--dev .dv-copy .dv-copy-label {
        display: none;
    }

    .l6-page--dev .dv-tablist {
        -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
        mask-image: linear-gradient(90deg, #000 82%, transparent);
    }

    .l6-page--dev .dv-env thead {
        display: none;
    }

    .l6-page--dev .dv-env tr {
        display: block;
        padding: 12px 0;
        border-top: 1px solid var(--l6-line);
    }

    .l6-page--dev .dv-env th,
    .l6-page--dev .dv-env td {
        display: block;
        padding: 2px 0;
        border: 0;
    }

    .l6-page--dev .dv-pre {
        padding: 16px;
        font-size: 0.78rem;
    }

    .l6-page--dev .dv-term-body {
        height: 400px;
        padding: 14px;
        font-size: 0.74rem;
    }

    .l6-page--dev .dv-chat-body {
        height: 440px;
        padding: 14px 12px 6px;
    }

    .l6-page--dev .dv-msg {
        max-width: 94%;
    }

    .l6-page--dev .dv-result {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 12px;
    }

    .l6-page--dev .dv-group ul {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .l6-page--dev .dv-panel-dark {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .l6-page--dev .dv-prompts {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--dev .dv-panel-dark-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .l6-page--dev .dv-ep-list,
    .l6-page--dev .dv-cmdgroups {
        margin: 0 -16px;
        padding: 4px 16px 8px;
    }

    .l6-page--dev .dv-strip .l6-wrap {
        gap: 12px;
    }

    .l6-page--dev .dv-strip ul {
        gap: 10px 18px;
    }

    .l6-page--dev .dv-strip li {
        font-size: 0.9rem;
    }

    .l6-page--dev .dv-params th {
        width: 40%;
    }

    .l6-page--dev .dv-env tbody th {
        white-space: normal;
    }

    .l6-page--dev .dv-final-actions .dv-btn {
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l6-page--dev .dv-caret,
    .l6-page--dev .dv-typing i,
    .l6-page--dev .dv-spin {
        animation: none;
    }

    .l6-page--dev .dv-arch-wire::after {
        display: none;
    }

    .l6-page--dev .dv-btn i,
    .l6-page--dev .dv-btn:hover .fa-arrow-right {
        transition: none;
        transform: none;
    }
}