/* ══════════════════════════════════════════════════════════════════════════
   /developers — the integration guide, on the shared landing system
   (2026-10-05). Loaded after home.css + about.css. Scoped to .dvx. Gold
   leads; code blocks stay dark in both themes (readability); no glows;
   logical properties; reduced-motion safe. Motion + contents rail: dev.js.
   ══════════════════════════════════════════════════════════════════════════ */
main.lp-page{ overflow:clip; }   /* keeps position:sticky alive for the rail */
.dvx{ padding-block-end:clamp(56px,7vw,96px); }
.dvx h1, .dvx h2, .dvx h3, .dvx p{ margin:0; }

/* ── hero ── */
.dvx-badge{ display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:7px 14px 7px 8px; border-radius:99px; font-size:13.5px; font-weight:800;
  background:var(--hm-card); border:1px solid var(--hm-line); animation:hm-rise .8s cubic-bezier(.2,.8,.2,1) backwards; }
[dir=rtl] .dvx-badge{ padding:7px 8px 7px 14px; }
.dvx-badge svg{ width:26px; height:26px; padding:5px; border-radius:9px; color:var(--em-gold-ink); background:var(--hm-gold); }
.dvx-h1{ font-size:clamp(30px,3.97vw,56px); }
.dvx-h1 .hm-gold .hm-w{ animation-delay:.2s; }
/* the terminal — a real request, answered line by line (identity navy terminal palette, 2026-10-12) */
.dvx-term{ margin:0; direction:ltr; border-radius:var(--hm-r); overflow:hidden; background:#071827; border:1px solid rgba(255,255,255,.08); animation:ab-in .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.dvx-term__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#0B1F31; border-bottom:1px solid rgba(255,255,255,.06); }
.dvx-term__bar i{ width:10px; height:10px; border-radius:50%; background:#2A4559; }
.dvx-term__bar span{ margin-left:auto; font:600 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#8FA1B1; }
.dvx-term__body{ margin:0; padding:18px 20px; min-height:230px; font:500 13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#FFF8F0; white-space:normal; overflow-x:auto; }
.dvx-term__l{ display:block; white-space:pre; min-height:1.75em; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; }
.dvx-term__l.is-on{ opacity:1; transform:none; }
.dvx-term .k{ color:#FF9A3D; font-weight:800; } .dvx-term .c{ color:#8FA1B1; } .dvx-term .ok{ color:#4CC38A; font-weight:800; }
.dvx-term .n{ color:#FFD3AD; } .dvx-term .s{ color:#C1CDD5; }
.dvx-term__foot{ display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.06); background:#0B1F31; }
.dvx-term__foot span{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font:700 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  opacity:0; transform:scale(.8); transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.5); }
.dvx-term.is-done .dvx-term__foot span{ opacity:1; transform:none; }
.dvx-term.is-done .dvx-term__sig{ transition-delay:.25s; }
.dvx-term__foot svg{ width:13px; height:13px; }
.dvx-term__hook{ color:#FF9A3D; background:rgba(255,121,0,.14); } .dvx-term__sig{ color:#4CC38A; background:rgba(63,185,80,.14); }

/* ── guide layout: sticky contents rail + the content column ── */
.dvx-layout{ display:grid; grid-template-columns:270px minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; }
.dvx .wrap{ min-width:0; }
.dvx-toc{ position:sticky; top:calc(var(--em-nav-h,72px) + 20px); margin-top:clamp(40px,5vw,68px); }
.dvx-toc__box{ border-radius:24px; background:var(--hm-card); border:1px solid var(--hm-line); overflow:hidden; }
.dvx-toc__head{ display:flex; align-items:center; gap:10px; padding:16px 18px; list-style:none; font-size:14px; font-weight:800; border-bottom:1px solid var(--hm-line); }
.dvx-toc__head::-webkit-details-marker{ display:none; }
.dvx-toc__ico{ width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--em-gold-ink); background:var(--hm-gold); }
.dvx-toc__ico svg{ width:16px; height:16px; }
.dvx-toc__chev{ width:16px; height:16px; margin-inline-start:auto; color:var(--em-muted); transition:transform .3s; }
.dvx-toc__box[open] .dvx-toc__chev{ transform:rotate(180deg); }
.dvx-toc__list{ list-style:none; margin:0; padding:10px; display:grid; gap:2px; max-height:calc(100vh - var(--em-nav-h,72px) - 150px); overflow-y:auto; scrollbar-width:thin; }
.dvx-toc__list a{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; font-size:13.5px; text-decoration:none; color:var(--em-text-2,var(--em-muted)); transition:background-color .25s, color .25s; }
.dvx-toc__list a:hover{ color:var(--em-text); background:var(--hm-card-2); }
.dvx-toc__no{ min-width:24px; height:24px; display:grid; place-items:center; border-radius:8px; font-size:12px; font-weight:800; color:var(--em-muted); background:var(--hm-card-2); }
.dvx-toc__list a.is-current{ color:var(--em-text); font-weight:800; background:color-mix(in srgb,var(--hm-gold) 12%,transparent); }
.dvx-toc__list a.is-current .dvx-toc__no{ color:var(--em-gold-ink); background:var(--hm-gold); }
.dvx-toc__list a.is-current::before{ content:''; position:absolute; inset-inline-start:-10px; inset-block:8px; width:3px; border-radius:3px; background:var(--hm-gold); }
@media (min-width:981px){ .dvx-toc__head{ cursor:default; } .dvx-toc__chev{ display:none; } }
@media (max-width:980px){ .dvx-layout{ grid-template-columns:minmax(0,1fr); } .dvx-toc{ position:static; } .dvx-toc__head{ cursor:pointer; } .dvx-toc__list{ max-height:none; } }

/* ── sections ── */
.dvx-sec{ margin-top:clamp(40px,5vw,68px); padding:clamp(22px,3vw,36px); border-radius:var(--hm-r); background:var(--hm-card); border:1px solid var(--hm-line);
  scroll-margin-top:calc(var(--em-nav-h,72px) + 20px); }
.dvx-sec > h2, .dvx-split__text > h2{ position:relative; margin-bottom:10px; padding-inline-start:16px; font-size:clamp(17.5px,1.99vw,23px); font-weight:800; line-height:1.45; }
.dvx-sec > h2::before, .dvx-split__text > h2::before{ content:''; position:absolute; inset-inline-start:0; inset-block:.3em; width:4px; border-radius:4px; background:var(--hm-gold); }
.dvx-sec .lead{ max-width:72ch; margin-bottom:20px; font-size:14.5px; line-height:1.9; color:var(--em-muted); }
.dvx-sec > .dvx-sub{ margin:28px 0 8px; font-size:clamp(14.5px,1.49vw,16.5px); font-weight:800; line-height:1.5; }
.dvx-split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,2.6vw,36px); align-items:start; }
.dvx-split__text > .lead:last-child{ margin-bottom:0; }
.dvx-split__code > .dvx-code{ margin:0; }
@media (max-width:900px){ .dvx-split{ grid-template-columns:minmax(0,1fr); gap:18px; } }

/* code */
.dvx-code{ direction:ltr; text-align:left; margin:0 0 18px; border-radius:18px; overflow:hidden; background:#071827; border:1px solid rgba(255,255,255,.08); }
.dvx-code pre{ margin:0; padding:18px 20px; overflow-x:auto; font:500 13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#FFF8F0; white-space:pre; }
.dvx-code .k{ color:#FF9A3D; font-weight:800; } .dvx-code .c{ color:#8FA1B1; }
.dvx code{ padding:1px 6px; border-radius:6px; font:600 .88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; direction:ltr; unicode-bidi:isolate;
  color:var(--em-text); background:var(--hm-card-2); border:1px solid var(--hm-line); }
.dvx-code code, .dvx-term code{ padding:0; border:0; background:none; color:inherit; }

/* notes */
.dvx-note{ display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; padding:14px 16px; border-radius:16px; border-inline-start:4px solid var(--dn, var(--hm-gold));
  background:color-mix(in srgb,var(--dn, var(--hm-gold)) 8%,var(--hm-card-2)); }
.dvx-note--warning{ --dn:#F5B84B; } .dvx-note--info{ --dn:var(--hm-gold); }
.dvx-note > i{ margin-top:4px; font-size:14.5px; color:var(--dn); }
.dvx-note-title{ margin-bottom:4px; font-size:14px; font-weight:800; }
.dvx-note-desc{ font-size:14px; line-height:1.85; color:var(--em-text-2,var(--em-muted)); }

/* steps: a rail running through numbered stops */
.dvx-steps{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dvx-steps::before{ content:''; position:absolute; inset-inline:12%; inset-block-start:20px; height:2px; background:linear-gradient(90deg, var(--hm-gold), color-mix(in srgb,var(--hm-gold) 25%,var(--hm-line))); }
[dir=rtl] .dvx-steps::before{ background:linear-gradient(270deg, var(--hm-gold), color-mix(in srgb,var(--hm-gold) 25%,var(--hm-line))); }
.dvx-step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.dvx-step .n{ width:42px; height:42px; display:grid; place-items:center; border-radius:14px; font-size:14.5px; font-weight:800; color:var(--em-gold-ink); background:var(--hm-gold); }
.dvx-step small{ font-size:13.5px; font-weight:700; line-height:1.5; }
@media (max-width:620px){ .dvx-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; } .dvx-steps::before{ display:none; } }

/* tables */
.dvx-tablewrap{ overflow-x:auto; margin:0 0 18px; border-radius:16px; border:1px solid var(--hm-line); }
.dvx-tablewrap table{ width:100%; min-width:480px; border-collapse:collapse; font-size:14px; }
.dvx-tablewrap th, .dvx-tablewrap td{ padding:11px 14px; text-align:start; vertical-align:top; line-height:1.65; border-bottom:1px solid var(--hm-line); }
.dvx-tablewrap th{ font-weight:800; background:var(--hm-card-2); }
.dvx-tablewrap tr:last-child td{ border-bottom:0; }
.dvx-tablewrap tbody tr:hover{ background:color-mix(in srgb,var(--hm-gold) 4%,transparent); }
.dvx-grouprow td{ font-weight:800; color:var(--hm-gold); background:color-mix(in srgb,var(--hm-gold) 7%,var(--hm-card-2)); }
.dvx-w110{ width:110px; } .dvx-w90{ width:90px; } .dvx-w200{ width:200px; }
.dvx-mb18{ margin-bottom:18px; } .dvx-mb12{ margin-bottom:12px; } .dvx-mb4{ margin-bottom:16px; } .dvx-mt14{ margin-top:14px; }

/* get started */
.dvx-cta-ico{ width:58px; height:58px; display:grid; place-items:center; margin-bottom:14px; border-radius:18px; color:var(--em-gold-ink); background:var(--hm-gold); }
.dvx-cta-ico svg{ width:26px; height:26px; }
.dvx-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
@media (max-width:720px){ .dvx-cards{ grid-template-columns:minmax(0,1fr); } }
.dvx-card{ padding:20px; border-radius:20px; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.dvx-card-body b{ display:block; font-size:14.5px; }
.dvx-card-desc{ margin-top:8px !important; font-size:14px; line-height:1.85; color:var(--em-muted); }

@media (prefers-reduced-motion: reduce){
  .dvx *, .dvx *::before, .dvx *::after{ animation:none !important; transition:none !important; }
  .dvx-term__l, .dvx-term__foot span{ opacity:1; transform:none; }
}