/* ==========================================================================
   SCALE — DEVELOPER PLATFORM PAGES (/developers/, /developers/docs/, /ar/…)

   Loaded after scale-industry.css: these pages ARE the industry pages' design
   (tokens, hero, buttons, cards, FAQ, final CTA, footer, ToC rail) — this file
   adds only what they alone have: code cards, the product comparison, steps,
   the id list, the events list, the plans, and the guide's prose.

   Light is the only theme. Code reads left to right on the Arabic pages too.
   ========================================================================== */

.dv-page{
    --dv-code:#0E1424;
    --dv-code-2:#141B2D;
    --dv-code-line:#232B40;
    --dv-code-ink:#E6E9EF;
    --dv-code-mute:#8A93A5;
    --dv-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* Inline code in copy and in the guide — one term, isolated from the line's direction. */
.dv-page code{font-family:var(--dv-mono);font-size:.86em;padding:1px 6px;border-radius:6px;background:var(--ip-line-3);border:1px solid var(--ip-line);color:var(--ip-ink);unicode-bidi:isolate;white-space:nowrap}
.dv-page pre code{padding:0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit;white-space:inherit}

/* ---- Sections ------------------------------------------------------------ */

.dv-sec{padding:72px 0;scroll-margin-top:var(--ip-header)}
.dv-sec--soft{background:var(--ip-soft);border-top:1px solid var(--ip-line-2);border-bottom:1px solid var(--ip-line-2)}
.dv-head{max-width:740px;margin:0 auto;text-align:center}
.dv-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ip-pink)}
.dv-head .ip-h2{margin-top:12px !important}
.dv-sub{margin-top:14px !important;font-size:16.5px;line-height:1.7;color:var(--ip-steel);text-wrap:pretty}
.dv-narrow{max-width:960px}
.dv-h3{margin-top:28px !important;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ip-ink)}
.dv-h3:first-child{margin-top:0 !important}
.dv-p{margin-top:8px !important;font-size:15px;line-height:1.7;color:var(--ip-steel)}

.dv-checks{display:flex;flex-direction:column;gap:11px;margin-top:18px !important}
.dv-checks li{display:flex;gap:10px;font-size:15px;line-height:1.6;color:var(--ip-body)}
.dv-checks .ip-i{width:16px;height:16px;margin-top:4px;color:#1E8F57}

/* ---- Hero: the words and a real request --------------------------------- */

.dv-hero{padding-bottom:72px}
.dv-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dv-hero__code{display:flex;flex-direction:column;gap:12px;min-width:0}

.dv-code{margin:0;min-width:0;border-radius:18px;overflow:hidden;background:var(--dv-code);border:1px solid #1C2438;box-shadow:0 32px 80px rgba(14,20,36,.16)}
.dv-code__bar{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 14px;background:var(--dv-code-2);border-bottom:1px solid var(--dv-code-line);font-size:12px;color:var(--dv-code-mute)}
.dv-code__dots{display:inline-flex;gap:6px;flex:none}
.dv-code__dots i{width:9px;height:9px;border-radius:50%;background:#2A3242}
.dv-code__t{flex:1;min-width:0;color:#C9D0DA;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-code__lang{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dv-page .dv-copy{display:inline-flex;align-items:center;gap:6px;flex:none;height:26px;margin:0;padding:0 10px;border-radius:7px;border:1px solid #2A3242;background:transparent;color:#C9D0DA;font:600 11.5px/1 "Instrument Sans",system-ui,sans-serif;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0}
.dv-page .dv-copy:hover,.dv-page .dv-copy:focus{border-color:#5A6478;background:transparent;color:#fff}
.dv-copy .ip-i{width:13px;height:13px}
.dv-code__pre{margin:0;padding:16px 18px;overflow-x:auto;font:12.5px/1.65 var(--dv-mono);color:var(--dv-code-ink);white-space:pre;direction:ltr;text-align:left;tab-size:2;background:none;border:0}
.dv-t-k{color:#F7A8C6}
.dv-t-s{color:#9FE0BC}
.dv-t-n{color:#F5C77E}
.dv-t-b{color:#9DB8F5}
.dv-t-m{color:#C9B6F2;font-weight:600}

/* ---- Who it is for: the two products side by side ------------------------ */

.dv-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:980px;margin:36px auto 0}
.dv-vs__col{border:1px solid var(--ip-line);border-radius:20px;padding:26px 28px;background:#fff}
.dv-vs__col--dev{border-color:var(--ip-pink-line);box-shadow:0 18px 44px rgba(196,42,99,.08)}
.dv-vs__col--ai{background:var(--ip-soft)}
.dv-vs__t{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;line-height:1.35}
.dv-checks--ai .ip-i{color:var(--ip-faint)}
.dv-vs__more{margin-top:22px !important;text-align:center;font-size:14.5px}
.dv-vs__more a{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dv-vs__more .ip-i{width:14px;height:14px}

/* ---- Use cases, steps ---------------------------------------------------- */

.dv-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.dv-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px !important}
.dv-step{border:1px solid var(--ip-line);border-radius:18px;padding:22px;background:#fff}
.dv-step__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dv-step__n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--ip-ink);color:#fff;font-size:13px;font-weight:700}
.dv-step__t{margin-top:16px !important;font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.dv-step__p{margin-top:8px !important;font-size:14px;line-height:1.65;color:var(--ip-steel);text-wrap:pretty}

/* ---- One key, many customers: features + the ids ------------------------- */

.dv-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:36px;align-items:start}
.dv-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dv-ids{border:1px solid var(--ip-line);border-radius:18px;background:#fff;padding:22px 24px}
.dv-ids__t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ip-muted)}
.dv-ids dl{margin:10px 0 0}
.dv-ids__row{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--ip-line-2)}
.dv-ids__row:first-child{border-top:0}
.dv-ids dt{flex:none;width:72px}
.dv-ids dd{margin:0;font-size:14px;line-height:1.5;color:var(--ip-steel)}

/* ---- Webhooks ------------------------------------------------------------ */

.dv-events{border:1px solid var(--ip-line);border-radius:18px;background:#fff;overflow:hidden}
.dv-events li{display:flex;gap:14px;align-items:baseline;padding:11px 18px;border-top:1px solid var(--ip-line-2);font-size:14px;line-height:1.5;color:var(--ip-steel)}
.dv-events li:first-child{border-top:0}
.dv-events code{flex:none;min-width:196px;text-align:left}
.dv-hookpoints{border:1px solid var(--ip-pink-line);border-radius:18px;background:var(--ip-pink-soft-2);padding:22px 24px}
.dv-hookpoints .dv-checks{margin-top:0 !important}

/* ---- The API ------------------------------------------------------------- */

.dv-api{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;margin-top:36px;align-items:start}
.dv-api__code{display:flex;flex-direction:column;gap:14px;min-width:0}
.dv-inline-code{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--dv-code);color:var(--dv-code-ink);font:12.5px/1.6 var(--dv-mono);overflow-x:auto;white-space:pre;direction:ltr;text-align:left}
.dv-errs{display:flex;flex-direction:column;gap:9px;margin-top:12px !important}
.dv-errs li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;font-size:14px;line-height:1.55;color:var(--ip-steel)}
.dv-doclinks{display:flex;flex-direction:column;gap:8px;margin-top:12px !important}
.dv-doclinks a{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--ip-line);border-radius:12px;background:#fff;color:var(--ip-ink) !important;font-size:14px;font-weight:500;transition:border-color .15s ease}
.dv-doclinks a:hover{border-color:var(--ip-strong)}
.dv-doclinks .ip-i{width:15px;height:15px;color:var(--ip-pink)}
.dv-doclinks__t{flex:1;min-width:0}
.dv-doclinks .dv-go{width:14px;height:14px;color:var(--ip-faint)}

/* ---- Pricing ------------------------------------------------------------- */

.dv-plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px;margin-top:36px;align-items:stretch}
.dv-plan{display:flex;flex-direction:column;gap:16px;border:1px solid var(--ip-line);border-radius:20px;padding:26px;background:#fff}
.dv-plan--main{border-color:var(--ip-pink-line);box-shadow:0 18px 44px rgba(196,42,99,.08)}
.dv-plan__name{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ip-muted)}
.dv-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ip-ink)}
.dv-plan__price small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ip-muted)}
.dv-plan .ip-btn{width:100%;margin-top:auto}
.dv-plan--incl{background:var(--ip-soft)}
.dv-plan--incl .dv-checks{margin-top:0 !important}
.dv-meta{margin-top:20px}
.dv-order{margin-top:36px;max-width:860px}
.dv-order .ip-steps{margin-top:14px !important}

/* ---- Final CTA: three buttons --------------------------------------------- */

.dv-final{padding:72px 0 0}
.dv-final .ip-btn--dark-ghost .ip-i{width:15px;height:15px}

/* ---- The guide (/developers/docs/) --------------------------------------- */

.dv-dhero{padding-bottom:12px}
.dv-dhero__in{position:relative;max-width:860px;margin-top:30px}
.dv-dhero .ip-lead{max-width:760px}
.dv-dhero .ip-hero__ctas{margin-top:24px}

.dv-doc{font-size:16px;line-height:1.75;color:var(--ip-body);overflow-wrap:break-word}
.dv-doc > *:first-child{margin-top:0 !important}
.ip-page .dv-doc h2{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--ip-line);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:var(--ip-ink);scroll-margin-top:calc(var(--ip-header) + 16px)}
.ip-page .dv-doc h3{margin:34px 0 0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.4;color:var(--ip-ink);scroll-margin-top:calc(var(--ip-header) + 16px)}
.ip-page .dv-doc h4{margin:24px 0 0;font-size:16px;font-weight:600;color:var(--ip-ink)}
.ip-page .dv-doc p{margin:14px 0 0}
.ip-page .dv-doc ul{margin:12px 0 0;padding-inline-start:22px;list-style:disc}
.ip-page .dv-doc ul ul{margin-top:6px;list-style:circle}
.dv-doc li{margin-top:6px}
.dv-doc li::marker{color:var(--ip-faint)}
.dv-doc hr{margin:28px 0;border:0;border-top:1px solid var(--ip-line)}
.dv-doc a{font-weight:500}
.ip-page .dv-doc pre{margin:16px 0 0;padding:16px 18px;border-radius:14px;background:var(--dv-code);color:var(--dv-code-ink);overflow-x:auto;font:13px/1.65 var(--dv-mono);white-space:pre;direction:ltr;text-align:left;tab-size:2}
.dv-doc code{white-space:normal}
.dv-doc .sdp-table-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--ip-line);border-radius:14px;background:#fff}
.dv-doc table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.dv-doc th{padding:10px 14px;background:var(--ip-soft);border-bottom:1px solid var(--ip-line);text-align:start;font-size:12.5px;font-weight:600;color:var(--ip-steel)}
.dv-doc td{padding:10px 14px;border-top:1px solid var(--ip-line-2);vertical-align:top;text-align:start}
.dv-doc tr:first-child td{border-top:0}
.dv-doc td code{white-space:nowrap}

/* ==========================================================================
   ≤1100
   ========================================================================== */
@media (max-width:1100px){
    .dv-hero__grid{grid-template-columns:minmax(0,1fr)}
    .dv-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dv-split,.dv-api{grid-template-columns:minmax(0,1fr)}
    .dv-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dv-plan--incl{grid-column:1/-1}
}

/* ==========================================================================
   ≤768 — phone
   ========================================================================== */
@media (max-width:768px){
    body.scale-developers{padding-bottom:82px}
    .dv-sec{padding:44px 0}
    .dv-hero{padding-bottom:44px}
    .dv-head{text-align:start}
    .dv-sub{margin-top:10px !important;font-size:15px}
    .dv-grid3,.dv-steps,.dv-feats,.dv-plans,.dv-vs{grid-template-columns:minmax(0,1fr)}
    .dv-grid3,.dv-steps,.dv-vs,.dv-split,.dv-api,.dv-plans{margin-top:22px}
    .dv-vs__col{padding:20px}
    .dv-vs__more{text-align:start}
    .dv-step{padding:18px}
    .dv-events li{flex-direction:column;gap:4px;padding:11px 16px}
    .dv-events code{min-width:0}
    .dv-code__pre{padding:14px;font-size:12px}
    .dv-code__lang{display:none}
    .dv-plan{padding:20px}
    .dv-plan__price{font-size:30px}
    .dv-final{padding-top:36px}
    .dv-dhero__in{margin-top:22px}
    .dv-doc{font-size:15.5px}
    .ip-page .dv-doc h2{margin-top:40px;padding-top:22px;font-size:23px}
    .ip-page .dv-doc h3{margin-top:28px;font-size:17.5px}
    .ip-page .dv-doc pre{font-size:12px;padding:14px}
}

/* ==========================================================================
   ARABIC — the same page, mirrored by dir="rtl"; code and ids stay LTR.
   ========================================================================== */
.ip-page[dir="rtl"] .dv-step__t,
.ip-page[dir="rtl"] .dv-vs__t,
.ip-page[dir="rtl"] .dv-h3{line-height:1.5}
.ip-page[dir="rtl"] .dv-doc h2{line-height:1.45}
.ip-page[dir="rtl"] .dv-doc h3{line-height:1.55}
.ip-page[dir="rtl"] .dv-code__bar{direction:ltr}
.ip-page[dir="rtl"] .dv-events code{text-align:right}

/* --------------------------------------------------------------------------
   THE SITE HEADER ON THE DEVELOPER PAGES (1.56.1)

   The shared header (scale-site-header.css) never states a link's
   text-decoration: the homepage template's own reset removes the underline
   there. These pages drop the theme's reset (drop_unused_assets()) and the
   industry reset `.ip-page a` does not reach the header — it is a sibling of
   .ip-page, not inside it — so every header link fell back to the browser's
   underline. Scoped to the Developer pages only (body.scale-developers), in
   every state; the keyboard focus ring is kept, and made visible.
   -------------------------------------------------------------------------- */
body.scale-developers .sh-header a,
body.scale-developers .sh-header a:link,
body.scale-developers .sh-header a:visited,
body.scale-developers .sh-header a:hover,
body.scale-developers .sh-header a:focus,
body.scale-developers .sh-header a:active,
body.scale-developers .sh-mobilenav a,
body.scale-developers .sh-mobilenav a:link,
body.scale-developers .sh-mobilenav a:visited,
body.scale-developers .sh-mobilenav a:hover,
body.scale-developers .sh-mobilenav a:focus,
body.scale-developers .sh-mobilenav a:active{text-decoration:none}
body.scale-developers .sh-header a:focus-visible,
body.scale-developers .sh-mobilenav a:focus-visible{outline:2px solid #2563EB;outline-offset:3px;border-radius:6px}