/* ============================================================
   CUSTOM INTEGRATIONS (home page, #custom-tools, 2026-10-21). A tool
   Askpilot has no built-in source for, connected by asking your AI agent.
   Builds on css/ai-handover.css (the canvas, the two cards, the arrow) and
   borrows the Claude chat pieces of css/ho-live.css that are not scoped to
   that section (.hol-chat, .hol-you, .hol-type, .hol-them, .hol-toolbox,
   .hol-tick, .hol-top, .hol-step). Adds the five tabs (MCP server, Any API,
   Webhooks in, Webhooks out, Askpilot API), the Askpilot screen on the
   right, the docs links under the box, and the play. Since 23 Oct 2026 it
   also carries what the API and webhooks section said (Dom merged them).

   Two kinds of beat (data-b, played by js/custom-tools.js):
     .ct-b  appears on its beat (hidden before it)
     .ct-s  is always there and changes state on its beat (a switch turns
            on, "Not connected" becomes "Connected", a key is typed)
   Without .is-anim (no JS, reduced motion) every beat shows as done.
   Both cards keep one height while it plays, and a pane that outgrows its
   card moves up inside it, so the page never moves.
   ============================================================ */

.ct .sec-lede { max-width: 820px; margin: 18px auto 0; }
/* two rows on a laptop: the question is a few pixels wider than the wrap at
   the shared 72px, so from 1024px up the type scales to fit it */
@media (min-width: 1024px) {
    .ct .sec-title { font-size: calc(min(100vw - 64px, 1136px) / 16.4); }
}

/* ---------- the tabs ---------- */
.ct-tabs {
    display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 36px auto 0; padding: 5px;
    border-radius: 999px; background: #fff; border: 1px solid var(--line, #EAE3E1);
    box-shadow: 0 1px 2px rgba(20, 17, 26, .04), 0 10px 24px -16px rgba(20, 17, 26, .22);
}
.ct-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px;
    border: 0; border-radius: 999px; background: transparent; white-space: nowrap;
    font-size: 0.9375rem; font-weight: 700; color: var(--body, #4E4854);
    transition: background-color var(--t-fast, 160ms), color var(--t-fast, 160ms);
}
.ct-tab img, .ct-tab svg { width: 18px; height: 18px; flex: none; }
.ct-tab:hover { color: var(--ink, #16121A); background: var(--soft, #F4EFED); }
.ct-tab.is-on { background: var(--ink, #16121A); color: #fff; }
.ct-tab.is-on img { filter: invert(1); }

/* ---------- the box ---------- */
.ct .ho-canvas { max-width: 1120px; margin-top: 28px; padding: 48px; }
.ct .ho-pair { max-width: 1000px; }
.ct .ho-arrow { width: 88px; }
.ct .ho-card { padding: 28px 26px 24px; height: 640px; overflow: hidden; }
.ct .ho-card-title { margin: 0 0 14px; font-size: 1.25rem; }
.ct .ho-arrow-dot { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ct .ho-arrow.is-sending .ho-arrow-dot { transform: scale(1.14); }

/* the step being played: its pill turns magenta, as in the How it works box */
.ct:not(.is-anim) .ct-step,
.ct[data-step="1"] .ct-step:not(.ct-step--ask),
.ct[data-step="2"] .ct-step--ask { background: #FDEBFD; color: var(--ho-ink); }
.ct:not(.is-anim) .ct-step > i,
.ct[data-step="1"] .ct-step:not(.ct-step--ask) > i,
.ct[data-step="2"] .ct-step--ask > i { background: var(--ho-magenta); color: #fff; }
/* "Connected" joins the second pill once the source is connected */
.ct-live {
    display: none; align-items: center; gap: 5px; margin-left: 4px; padding-left: 9px;
    border-left: 1px solid rgba(22, 18, 26, .12); font-style: normal; color: #17794A;
}
.ct-live span { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; animation: hol-pulse 2s ease-out infinite; }
.ct:not(.is-anim) .ct-live, .ct.is-done .ct-live { display: inline-flex; }
.ct.is-anim.is-done .ct-live { animation: hol-sent .35s cubic-bezier(.16, 1, .3, 1) both; }

/* a pane per tab, in each card; only the selected one shows */
.ct-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; transition: opacity .3s; }
.ct-pane { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ct-pane:not(.is-on) { display: none; }
.ct.is-switch .ct-view { opacity: 0; }
/* once a pane has moved up, its top edge fades rather than cutting a line */
.ct-view.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }

/* ---------- the Claude chat (left) ---------- */
.ct .hol-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.ct .hol-chat-bar { margin: -2px 0 0; }
.ct .hol-type { max-width: 92%; }
.ct .hol-type u { color: #3D5BD9; text-underline-offset: 2px; }
.ct .hol-them { position: relative; }
.ct .hol-toolbox li { align-items: flex-start; }
.ct .hol-toolbox .hol-tick { margin-top: 1px; }
/* Claude thinks for a moment before each answer */
.ct-dots { position: absolute; left: 22px; top: 5px; display: flex; gap: 3px; opacity: 0; pointer-events: none; }
.ct-dots i { width: 5px; height: 5px; border-radius: 50%; background: #B9B3BF; animation: ct-bounce 1s ease-in-out infinite; }
.ct-dots i:nth-child(2) { animation-delay: .15s; }
.ct-dots i:nth-child(3) { animation-delay: .3s; }
.ct.is-anim .hol-them.is-in .ct-dots { animation: ct-think .75s linear both; }
.ct.is-anim .hol-them.is-in > span { animation: ct-text .4s .7s both; }

/* ---------- the Askpilot source (right) ---------- */
.ct-app {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid #ECE8EE; border-radius: 14px; background: #fff;
    font-size: 0.8125rem; line-height: 1.45; color: #16121A;
}
.ct-app .ct-pane { padding: 0 14px 14px; gap: 10px; }
.ct-app p { margin: 0; }
.ct-app-bar {
    display: flex; align-items: center; gap: 7px; margin: 0 -14px !important; padding: 9px 14px;
    background: #FAFAFA; border-bottom: 1px solid #F0EEF1; font-size: 0.75rem; color: #8B8492;
}
.ct-app-bar img { width: 14px; height: 14px; }
.ct-app-bar i { font-style: normal; color: #C9C4D0; }
.ct-app-bar b { color: #16121A; font-weight: 700; }

.ct-src { display: flex; align-items: center; gap: 10px; padding-top: 3px; }
.ct-src-ico {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid #ECE8EE; background: #fff;
}
.ct-src-ico img { width: 20px; height: 20px; }
.ct-src-ico svg { width: 18px; height: 18px; }
.ct-src-ico--api { color: #4C6BEE; background: #EEF2FE; border-color: #DDE4FC; }
.ct-src-ico--hook { color: #A21CAF; background: #FDF2FD; border-color: #F5D9F5; }
.ct-src > p { flex: 1; min-width: 0; }
.ct-src b { display: block; font-size: 0.875rem; }
.ct-src p span { display: block; font-size: 0.6875rem; color: #8B8492; }

.ct-status {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    background: #F3F2F6; color: #6B7280; font-style: normal; font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
    transition: background-color .3s, color .3s;
}
.ct-status i { width: 6px; height: 6px; border-radius: 50%; background: #B9B3BF; transition: background-color .3s; }
.ct-status--wait { background: #FEF6E4; color: #92400E; }
.ct-status--wait i { background: #F5A524; animation: hol-pulse-amber 2s ease-out infinite; }

/* a state that changes on its beat: off words, then on words */
.ct-s .ct-on { display: none; }
.ct:not(.is-anim) .ct-s .ct-off, .ct-s.is-in .ct-off { display: none; }
.ct:not(.is-anim) .ct-s .ct-on, .ct-s.is-in .ct-on { display: inline; }
.ct:not(.is-anim) .ct-status, .ct-status.is-in { background: #DCFCE7; color: #15803D; }
.ct:not(.is-anim) .ct-status i, .ct-status.is-in i { background: #16A34A; animation: none; }

.ct-field > span { display: block; margin-bottom: 4px; font-size: 0.6875rem; font-weight: 700; color: #8B8492; }
.ct-field > p {
    display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 6px 10px;
    border: 1px solid #E5E1E8; border-radius: 8px; background: #FCFCFD;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.71875rem; color: #16121A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-field--copy em {
    margin-left: auto; padding-left: 8px; font-style: normal; font-family: var(--font-sans);
    font-size: 0.6875rem; font-weight: 750; color: #4C4CE0;
}

.ct-auth { display: flex; align-items: flex-end; gap: 8px; }
.ct-auth .ct-field { flex: 1; min-width: 0; }
.ct-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 31px;
    padding: 6px 12px; border-radius: 8px; border: 1px solid #DCD7E0; background: #fff;
    font-size: 0.75rem; font-weight: 750; color: #16121A; white-space: nowrap;
    transition: background-color .3s, border-color .3s, color .3s;
}
.ct-btn img { width: 14px; height: 14px; }
.ct-btn--ink { background: #16121A; border-color: #16121A; color: #fff; }
.ct:not(.is-anim) .ct-btn, .ct-btn.is-in { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.ct.is-anim .ct-btn.is-in { animation: ct-press .45s cubic-bezier(.3, 1.6, .5, 1); }

/* the key goes in as dots, typed */
.ct-key i { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; font-style: normal; letter-spacing: 1px; }
.ct:not(.is-anim) .ct-key i { max-width: 20em; }
.ct.is-anim .ct-key.is-in i { animation: ct-type .9s steps(16) both; }

.ct-list-h {
    display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px !important;
    font-size: 0.6563rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #8B8492;
}
.ct-list-h span { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.ct-list { list-style: none; margin: -4px 0 0; padding: 0; border: 1px solid #ECE8EE; border-radius: 10px; overflow: hidden; }
.ct-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #F5F4F6; }
.ct-list li:last-child { border-bottom: 0; }
.ct-list li > p { flex: 1; min-width: 0; }
.ct-list b { display: flex; align-items: center; font-size: 0.75rem; font-weight: 700; }
.ct-list li > p > span { display: block; font-size: 0.6875rem; color: #8B8492; }
.ct-m {
    flex: none; margin-right: 7px; padding: 1px 5px; border-radius: 4px; background: #E7F6EE; color: #17794A;
    font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.5938rem; font-weight: 800;
}
.ct-m--w { background: #FEF3C7; color: #92400E; }
.ct-appr, .ct-ev {
    flex: none; padding: 2px 7px; border-radius: 999px; font-size: 0.625rem; font-weight: 750; white-space: nowrap;
}
.ct-appr { background: #FDEBFD; color: #A21CAF; }
.ct-ev { background: #EEF0FF; color: #4C4CE0; }

/* a tool's switch: off, then on */
.ct-sw { flex: none; position: relative; width: 26px; height: 15px; border-radius: 999px; background: #E2DFE6; transition: background-color .25s; }
.ct-sw::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(20, 17, 26, .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.ct:not(.is-anim) .ct-sw.ct-s, .ct-sw.ct-s.is-in { background: #16A34A; }
.ct:not(.is-anim) .ct-sw.ct-s::after, .ct-sw.ct-s.is-in::after { transform: translateX(11px); }

/* the test event and the fields learned from it */
.ct-test { padding: 9px 10px 10px; border: 1px solid #D5EFDF; border-radius: 10px; background: #F4FBF7; }
.ct-test-h { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 700; }
.ct-test-h > span:last-child { margin-left: auto; font-size: 0.6875rem; font-weight: 650; color: #17794A; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px !important; }
.ct-chips code {
    padding: 2px 7px; border-radius: 6px; border: 1px solid #D5EFDF; background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: #16121A;
}
.ct.is-anim .ct-test.is-in code { animation: ct-pop .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.ct.is-anim .ct-test.is-in code:nth-child(1) { animation-delay: .25s; }
.ct.is-anim .ct-test.is-in code:nth-child(2) { animation-delay: .37s; }
.ct.is-anim .ct-test.is-in code:nth-child(3) { animation-delay: .49s; }
.ct.is-anim .ct-test.is-in code:nth-child(4) { animation-delay: .61s; }

.ct-note {
    display: flex; align-items: flex-start; gap: 7px; margin-top: auto !important; padding: 9px 11px;
    border-radius: 10px; background: #F7F6F9; font-size: 0.6875rem; line-height: 1.45; color: #4E4854;
}
.ct-note svg { flex: none; width: 13px; height: 13px; margin-top: 1px; color: #6B7280; }

/* ---------- Webhooks out and Askpilot API ---------- */
/* the Askpilot API tab names Claude Code, and the right card says the app connects */
.ct-bar-c, .ct-bar-cc { display: inline-flex; align-items: center; gap: 7px; }
.ct-bar-cc, .ct-ttl--app { display: none !important; }
.ct[data-s="app"] .ct-bar-c, .ct[data-s="app"] .ct-ttl:not(.ct-ttl--app) { display: none !important; }
.ct[data-s="app"] .ct-bar-cc { display: inline-flex !important; }
.ct[data-s="app"] .ct-ttl--app { display: inline !important; }

.ct-src-ico--out { color: #0F766E; background: #ECFDF5; border-color: #CDEFE3; }
.ct-ev--ok { background: #E7F6EE; color: #17794A; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* the example body of the Webhook source */
.ct-field > pre.ct-body {
    margin: 0; padding: 7px 10px; border: 1px solid #E5E1E8; border-radius: 8px; background: #FCFCFD;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; line-height: 1.5;
    color: #16121A; white-space: pre; overflow: hidden;
}
/* code in a reply of the AI agent */
.ct .hol-them span code {
    padding: 1px 4px; border-radius: 4px; background: #F3F2F6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
}
.ct .hol-them span code.ct-code {
    display: block; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #16121A; color: #E9E6EE;
    font-size: 0.6875rem; line-height: 1.65; white-space: pre; overflow: hidden;
}
.ct-code b { color: #F9A8F4; font-weight: 700; }

/* the docs under the box */
.ct-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px 0 0; }

/* ---------- the play (only once js/custom-tools.js adds .is-anim) ---------- */
.ct.is-anim .ct-b { opacity: 0; transform: translateY(5px); }
.ct.is-anim .ct-b.is-in { opacity: 1; transform: none; transition: opacity .35s, transform .4s cubic-bezier(.16, 1, .3, 1); }

@keyframes ct-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes ct-think { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ct-text { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-press { 0% { transform: scale(1); } 35% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes ct-type { from { max-width: 0; } to { max-width: 20em; } }
@keyframes ct-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- the Askpilot card's skeleton ----------
   As in the How it works box, the source screen starts as a skeleton: until
   a piece of it arrives, it is drawn where it will stand, its words as soft
   shimmering bars the width of the words, its boxes, buttons, switches and
   chips as empty shapes, its icons hidden. On its beat the real piece fades
   in on the same spot, so nothing shifts. Only while the play runs. */
.ct.is-anim .ct-app .ct-b:not(.is-in) { opacity: 1; transform: none; }
.ct.is-anim .ct-app .ct-b:not(.is-in),
.ct.is-anim .ct-app .ct-b:not(.is-in) * {
    color: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
.ct.is-anim .ct-app .ct-b:not(.is-in) :is(img, .ct-status i, .ct-dots) { visibility: hidden; }
.ct.is-anim .ct-app .ct-b:not(.is-in) .ct-sw::after { opacity: 0; }
.ct.is-anim .ct-app .ct-b:not(.is-in) :is(
    .ct-app-bar > span, .ct-app-bar > b,
    .ct-src-ico, .ct-src b, .ct-src p span, .ct-status,
    .ct-field > span, .ct-field > p, .ct-field > pre, .ct-btn,
    .ct-list-h > b, .ct-list-h > span, .ct-list b, .ct-list li > p > span, .ct-m, .ct-appr, .ct-ev, .ct-sw,
    .ct-test-h .hol-tick, .ct-test-h b, .ct-test-h > span:last-child, .ct-chips code,
    .ct-note svg, .ct-note span
) {
    background: linear-gradient(90deg, #F1EEF2 0%, #F8F6F9 40%, #F1EEF2 80%) 0 0 / 220% 100%;
    animation: hol-shimmer 1.4s linear infinite; border-radius: 6px;
}
/* words become bars as wide as the words, not the whole row */
.ct.is-anim .ct-app .ct-b:not(.is-in) :is(.ct-src b, .ct-src p span, .ct-field > span, .ct-list b, .ct-list li > p > span) { width: fit-content; }
.ct.is-anim .ct-app .ct-b:not(.is-in) :is(.ct-src p span, .ct-field > span, .ct-list li > p > span) { margin-top: 3px; }
.ct.is-anim .ct-app .ct-b:not(.is-in) :is(.ct-status, .ct-appr, .ct-ev, .ct-sw, .ct-chips code) { border-radius: 999px; }
.ct.is-anim .ct-app .ct-b:not(.is-in) .ct-src-ico { border-radius: 10px; }
.ct.is-anim .ct-app .ct-b:not(.is-in) .ct-test-h .hol-tick { border-radius: 50%; }
.ct.is-anim .ct-app .ct-b:not(.is-in) .ct-note svg { border-radius: 4px; }
/* the boxes around the pieces stay as faint outlines */
.ct.is-anim .ct-app .ct-b:not(.is-in):is(.ct-list, .ct-test) { border-color: #F0EEF1 !important; background: #fff; }
.ct.is-anim .ct-app .ct-b:not(.is-in).ct-note { background: #FBFAFB; }
.ct.is-anim .ct-app .ct-b:not(.is-in).ct-app-bar { border-bottom-color: #F0EEF1 !important; }
/* the real piece fades in where its skeleton stood */
.ct.is-anim .ct-app .ct-b.is-in { animation: ct-unskel .45s ease-out both; }
@keyframes ct-unskel { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ct .ct-app .ct-b :is(span, b, p, i, em, small, code, svg) { animation: none; }
}

/* without the play (no JS, reduced motion) the cards size to their words */
.ct:not(.is-anim) .ho-card { height: auto; }

@media (max-width: 1100px) and (min-width: 768px) {
    .ct .ho-canvas { padding: 32px; }
    .ct .ho-arrow { width: 64px; }
    .ct .ho-card { padding: 24px 18px 20px; }
}
/* five tabs do not fit a phone: below 820px the tray becomes a full-width
   rail the tabs scroll along, as in Workflow packages */
@media (max-width: 819px) {
    .ct { overflow-x: clip; }
    .ct-tabs {
        justify-content: flex-start; width: auto; max-width: none; overflow-x: auto; scrollbar-width: none;
        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 5px 16px;
        border-radius: 0; border-left: 0; border-right: 0;
    }
    .ct-tabs::-webkit-scrollbar { display: none; }
    .ct-tab { flex: none; }
}
@media (max-width: 767px) {
    .ct-tabs { margin-top: 28px; }
    .ct-links { margin-top: 24px; }
    .ct-tab { gap: 6px; padding: 8px 12px 8px 10px; font-size: 0.875rem; }
    .ct-tab img, .ct-tab svg { width: 16px; height: 16px; }
    /* the canvas runs edge to edge on a phone, as in the How it works box */
    .ct .ho-canvas { padding: 0; margin-top: 24px; }
    .ct .ho-arrow { width: auto; }
    .ct .ho-card { padding: 22px 16px 18px; height: 600px; }
}
@media (max-width: 374px) {
    .ct-tab { padding: 8px 9px; font-size: 0.8125rem; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-live span, .ct-status--wait i, .ct-dots i { animation: none; }
}

/* the Askpilot card's ink outline at the weight of the other ink boxes: 1.5px (2026-10-22, Dom) */
.ct .ho-card--ask { border-width: 1.5px; }

/* ============================================================
   THE DARK BAND (#connect-systems, 2026-10-23). The same five tabs and
   play as #custom-tools, on the dark ground the API and webhooks band had:
   deep ink with a magenta glow behind the title and a cool one in the far
   corner. The canvas and the card shells are dark glass with a hairline
   edge; the Claude chat and the Askpilot screens stay white inside them,
   the way an app sits on a dimmed screen. Type on the band is light.
   ============================================================ */
.ct--dark {
    --cd-bg: #0D0B13;
    --cd-ink: #F7F4F9;
    --cd-body: #C4BCCB;
    --cd-muted: #9A92A5;
    --cd-glass: rgba(255, 255, 255, 0.045);
    --cd-glass-2: rgba(255, 255, 255, 0.08);
    --cd-edge: rgba(255, 255, 255, 0.11);
    --cd-edge-2: rgba(255, 255, 255, 0.2);
    --cd-magenta: #F07DF0;
    position: relative; isolation: isolate;
    padding: 110px 0 130px; border-top: 0;
    background: var(--cd-bg); color: var(--cd-body);
}
.ct--dark::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 460px at 50% -120px, rgba(213, 59, 213, 0.28), rgba(213, 59, 213, 0) 70%),
        radial-gradient(760px 420px at 100% 100%, rgba(76, 107, 238, 0.16), rgba(76, 107, 238, 0) 70%);
}
.ct--dark .sec-eyebrow { color: var(--cd-magenta); }
.ct--dark .sec-title { color: var(--cd-ink); }

/* the tabs: a glass tray, the selected tab a white pill */
.ct--dark .ct-tabs { background: var(--cd-glass); border-color: var(--cd-edge); box-shadow: none; }
.ct--dark .ct-tab { color: var(--cd-body); }
.ct--dark .ct-tab:hover { color: #fff; background: var(--cd-glass-2); }
.ct--dark .ct-tab.is-on { background: #fff; color: #16121A; }
.ct--dark .ct-tab img { filter: invert(1); }
.ct--dark .ct-tab.is-on img { filter: none; }

/* the canvas and the rings around the arrow */
.ct--dark .ho-canvas {
    border-color: var(--cd-edge);
    background-color: rgba(255, 255, 255, 0.03);
    background-image:
        radial-gradient(45% 70% at 0% 0%, rgba(245, 128, 56, 0.10), transparent 70%),
        radial-gradient(45% 70% at 100% 100%, rgba(213, 59, 213, 0.14), transparent 70%);
}
.ct--dark .ho-arrow::before {
    background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 35px, rgba(255, 255, 255, 0.05) 35px 36px);
}
.ct--dark .ho-arrow-track { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 5px, transparent 5px 10px); }
.ct--dark .ho-arrow-dot { background: #fff; color: #16121A; box-shadow: 0 0 0 6px #141219; }

/* the card shells: dark glass; the screens inside stay white */
.ct--dark .ho-card {
    background: var(--cd-glass); border-color: var(--cd-edge);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.ct--dark .ho-card--ask { border-color: rgba(240, 125, 240, 0.5); }
.ct--dark .ho-card-title { color: var(--cd-ink); }
.ct--dark .ho-logos img { border-color: transparent; }
.ct--dark .hol-chat, .ct--dark .ct-app { border-color: transparent; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.55); }

/* the step pills on the glass */
.ct--dark .hol-step { background: var(--cd-glass-2); color: var(--cd-muted); }
.ct--dark .hol-step > i { background: rgba(255, 255, 255, 0.12); color: var(--cd-body); }
.ct--dark:not(.is-anim) .ct-step,
.ct--dark[data-step="1"] .ct-step:not(.ct-step--ask),
.ct--dark[data-step="2"] .ct-step--ask { background: rgba(240, 125, 240, 0.16); color: var(--cd-ink); }
.ct--dark:not(.is-anim) .ct-step > i,
.ct--dark[data-step="1"] .ct-step:not(.ct-step--ask) > i,
.ct--dark[data-step="2"] .ct-step--ask > i { background: var(--ho-magenta); color: #fff; }
.ct--dark .ct-live { color: #86E3B0; border-left-color: rgba(255, 255, 255, 0.16); }
.ct--dark .ct-live span { background: #5ED39A; }

/* the docs: ghost buttons on the dark */
.ct--dark .ct-links .btn-outline { background: transparent; border-color: var(--cd-edge-2); color: var(--cd-ink); }
.ct--dark .ct-links .btn-outline:hover { background: var(--cd-glass-2); border-color: rgba(255, 255, 255, 0.34); }

@media (max-width: 819px) {
    .ct--dark .ct-tabs { background: rgba(255, 255, 255, 0.04); }
}
@media (max-width: 767px) {
    /* the shared box turns the section white on a phone: keep the dark */
    .ct--dark { padding: 72px 0 80px; background-color: var(--cd-bg); background-image: none; }
    .ct--dark .ho-arrow-track { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 5px, transparent 5px 10px); }
    .ct--dark .ho-arrow-dot { box-shadow: 0 0 0 6px var(--cd-bg); }
}