/* ============================================================
   DEVELOPERS . Developers & API (developers.html) . 2026-10-21
   Ground truth: 21.10 notes otabek/Developers & API/Spec+Html/developers-api.html + developers-api-page-spec.md;
                 the PDF is 1440 x 5347 pt (1 pt = 1 px). Figma "DD-Website" frame "Developers & API" (1275:9226).

   Same recipe as sept-cnt/bapw.css: <main> IS the designer's markup (classes dev-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes (qa/oracle/skin_css.py):
     .x                 -> [data-skin="dev"] #main .dev-x
     hero photo         -> his CSS background, data: URI -> sept/developers/hero.webp (md5-matched)
     embedded images    -> his named files under sept/developers/ (md5-matched); request-access photo as webp
     ISO badges         -> the OFFICIAL artwork badges/official/{27001,22301}-nonukas.png, not his PNGs
                           (docs/iso-badge-rules.md s.1); his 93x120 slot with object-fit:contain, never stretched
     body min-width     -> gone (D1); the block at the end relaxes his fixed widths below 1300.
     nav + footer       -> his rules dropped (34 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css
     cursor blink       -> skin_css.py flattens @keyframes/@media; both restored by hand below

   Deviations from his HTML, each on record (Yuval 2026-10-21 "all ok", rows B1 and B2):
     hero       live hero chips dropped (03.10).
     fold 2     live copy wins over his August wording: "Find the resources your integration needs.",
                "Supported rails", the "Browse resources ..." paragraph (product reviews/developers page changes.csv).
     links      the live card links stay links with the full stop outside: "Read the authorisation guide",
                "EMx workflow guides", "View webhook documentation", "View all API categories".
     case       the terminal title is the live "DD PublicAPI · EMx" text, drawn in his capitals by CSS.
     breaks     his hard <br>s kept with a space before each (designer_to_main.py keep_br).
     reveals    kept (D3): scroll-driven, same timing family as alt-home.css, defined at the end.
   ============================================================ */

/* ---------- resets his page relied on, scoped to main (skin_css.py standard block) ---------- */
html[data-skin="dev"] body{background:#fff}
[data-skin="dev"] main{
  width:100%;overflow-x:clip;color:#121212;font-size:16px;line-height:normal;letter-spacing:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
}
[data-skin="dev"] #main *,[data-skin="dev"] #main *::before,[data-skin="dev"] #main *::after{box-sizing:border-box}
[data-skin="dev"] #main *{margin:0;padding:0}
[data-skin="dev"] #main ul{list-style:none}
[data-skin="dev"] #main a{color:inherit;text-decoration:none}
[data-skin="dev"] #main img,[data-skin="dev"] #main svg{display:block}
[data-skin="dev"] #main h1,[data-skin="dev"] #main h2,[data-skin="dev"] #main h3,[data-skin="dev"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="dev"] #main section{position:relative;width:100%}   /* his absolute .divider hairlines hang off the section (Payments and FX taught this) */

/* ---------- his page, transcribed (skin_css.py) ---------- */
/* layout wrappers */
[data-skin="dev"] #main .dev-full{width:100%}
[data-skin="dev"] #main .dev-c1280{width:1280px;margin:0 auto}
[data-skin="dev"] #main .dev-sec{width:1440px;margin:0 auto;background:#FFFFFF;position:relative}
[data-skin="dev"] #main .dev-divider{position:absolute;top:0;left:140px;width:1160px;height:1px;background:#D6D2C7}
/* type */
[data-skin="dev"] #main .dev-h1{font-weight:500;font-size:52px;line-height:1.21}
[data-skin="dev"] #main .dev-h2{font-weight:500;font-size:44px;line-height:1.21;color:#121212}
[data-skin="dev"] #main .dev-h3{font-weight:500;font-size:24px;line-height:1.21;color:#121212}
[data-skin="dev"] #main .dev-h4{font-weight:500;font-size:20px;line-height:1.35;color:#121212}
[data-skin="dev"] #main .dev-bl{font-weight:400;font-size:16px;line-height:1.5}
[data-skin="dev"] #main .dev-bm{font-weight:400;font-size:14px;line-height:1.5}
[data-skin="dev"] #main .dev-bc{font-weight:400;font-size:14px;line-height:1.35}
[data-skin="dev"] #main .dev-sm{font-weight:400;font-size:12px;line-height:1.5}
[data-skin="dev"] #main .dev-link{color:#B75F00}
/* buttons */
[data-skin="dev"] #main .dev-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border-radius:100px;font-size:16px;line-height:1.21;white-space:nowrap;border:0}
[data-skin="dev"] #main .dev-btn-dark{background:#121212;color:#FFFFFF;font-weight:700}
[data-skin="dev"] #main .dev-btn-white{background:#FFFFFF;color:#121212;font-weight:700}
[data-skin="dev"] #main .dev-btn-sand{background:#F4F3F0;color:#555049;font-weight:500}
[data-skin="dev"] #main .dev-btn-white2{background:#FFFFFF;color:#555049;font-weight:500}
[data-skin="dev"] #main .dev-btn-glass{background:rgba(18,18,18,0.16);color:#FFFFFF;font-weight:500}
[data-skin="dev"] #main .dev-btn:hover{filter:brightness(0.95)}
/* 1 navbar */
/* 2 hero */
[data-skin="dev"] #main .dev-hero{height:684px;display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 80px}
[data-skin="dev"] #main .dev-hero-card{width:1280px;height:640px;flex:none;border-radius:48px;overflow:hidden;padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px;
 background:
  radial-gradient(ellipse 990px 1645px at 70% 49%, rgba(44,38,32,0) 0%, rgba(44,38,32,0) 12.6%, rgba(44,38,32,1) 100%),
  url(sept/developers/hero.webp) center/cover no-repeat, #8a7766}
[data-skin="dev"] #main .dev-hero-text{width:500px;display:flex;flex-direction:column;gap:20px;color:#FFFFFF}
[data-skin="dev"] #main .dev-hero-text p{width:480px;opacity:.8}
[data-skin="dev"] #main .dev-btn-row{display:flex;align-items:center;gap:20px}
[data-skin="dev"] #main .dev-hero-note{color:#7B756D;text-align:center;white-space:nowrap}
/* 3 integration */
[data-skin="dev"] #main .dev-integ{height:715px;display:flex;align-items:center;gap:120px;padding:140px 120px 160px 160px}
[data-skin="dev"] #main .dev-integ-left{width:480px;flex:none;display:flex;flex-direction:column;gap:30px}
[data-skin="dev"] #main .dev-pills{display:flex;align-items:center;gap:12px;height:37px}
[data-skin="dev"] #main .dev-pill{display:inline-flex;align-items:center;height:37px;padding:10px 16px;border-radius:100px;border:1px solid #5C5750;color:#5C5750;font-weight:500;font-size:14px;line-height:1.21;white-space:nowrap}
[data-skin="dev"] #main .dev-pill.dev-hl{border:1.5px solid #F37F00;color:#F37F00;font-weight:600}
[data-skin="dev"] #main .dev-integ-copy{display:flex;flex-direction:column;gap:20px;color:#5C5750}
[data-skin="dev"] #main .dev-term{width:560px;height:415px;flex:none;border-radius:20px;overflow:hidden;background:#16120F;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;position:relative}
[data-skin="dev"] #main .dev-term-bar{height:36px;background:#1F1A16;border-bottom:1px solid #2E2823;position:relative}
[data-skin="dev"] #main .dev-dot{position:absolute;top:13px;width:10px;height:10px;border-radius:50%;background:#4A433D}
[data-skin="dev"] #main .dev-term-title{position:absolute;left:78px;top:0;line-height:36px;font-size:11px;font-weight:700;letter-spacing:.12em;color:#8A8178}
[data-skin="dev"] #main .dev-tl{position:absolute;left:28px;font-size:13px;line-height:16px;white-space:pre;color:#F2EDE6}
[data-skin="dev"] #main .dev-tl .dev-c{color:#8A8178}
[data-skin="dev"] #main .dev-tl .dev-k{color:#F28C38;font-weight:700}
[data-skin="dev"] #main .dev-tl .dev-ok{color:#7FC59A}
[data-skin="dev"] #main .dev-tl .dev-r{color:#E8924A}
[data-skin="dev"] #main .dev-tl .dev-n{display:inline-block;width:12px;text-align:right;color:#F28C38;font-weight:700}
[data-skin="dev"] #main .dev-tl .dev-res{display:inline-block;width:152px}
[data-skin="dev"] #main .dev-cursor{position:absolute;left:28px;top:370px;width:8px;height:16px;background:#F28C38;animation:dev-blink 1.1s steps(1) infinite}
@keyframes dev-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){[data-skin="dev"] #main .dev-cursor{animation:none}}
/* 4 feature strip */
[data-skin="dev"] #main .dev-strip{height:733px;display:flex;flex-direction:column;align-items:center;gap:80px;padding:140px 80px 160px}
[data-skin="dev"] #main .dev-strip .dev-h2{width:600px;text-align:center}
[data-skin="dev"] #main .dev-cards{width:1200px;flex:none;display:flex;gap:30px;align-items:flex-start}
[data-skin="dev"] #main .dev-card{width:380px;height:247px;border:1px solid #D6D2C7;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:30px;overflow:hidden}
[data-skin="dev"] #main .dev-card img{width:40px;height:40px}
[data-skin="dev"] #main .dev-card-text{width:320px;display:flex;flex-direction:column;gap:12px}
[data-skin="dev"] #main .dev-card-text p{color:#5C5750}
/* 5 request access */
[data-skin="dev"] #main .dev-req{height:800px;display:flex;align-items:center;justify-content:center;padding:160px 80px}
[data-skin="dev"] #main .dev-req-row{width:1120px;display:flex;align-items:center;gap:120px}
[data-skin="dev"] #main .dev-req-photo{width:480px;height:480px;flex:none;border-radius:48px;object-fit:cover;background:#D9CBBE}
[data-skin="dev"] #main .dev-req-text{width:520px;flex:none;display:flex;flex-direction:column;gap:60px}
[data-skin="dev"] #main .dev-req-group{display:flex;flex-direction:column;gap:20px}
[data-skin="dev"] #main .dev-req-group p{color:#5C5750}
/* 6 trust */
[data-skin="dev"] #main .dev-trust{height:995px;display:flex;flex-direction:column;align-items:center;gap:80px;padding:140px 160px 80px}
[data-skin="dev"] #main .dev-trust .dev-h2{width:720px;text-align:center}
[data-skin="dev"] #main .dev-tcards{width:1120px;display:flex;gap:30px}
[data-skin="dev"] #main .dev-tcard{flex:1 1 0;height:380px;border:1px solid #D6D2C7;border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:30px;overflow:hidden}
[data-skin="dev"] #main .dev-tvis{height:120px;display:flex;align-items:center;gap:20px}
[data-skin="dev"] #main .dev-fca-logo{width:127px;height:40px;object-fit:contain;object-position:left center}
[data-skin="dev"] #main .dev-circle{width:100px;height:100px;border-radius:50%;background:#F6F6F6;display:flex;align-items:center;justify-content:center}
[data-skin="dev"] #main .dev-badge{width:93px;height:120px;object-fit:contain}
[data-skin="dev"] #main .dev-ttext{width:273.33px;display:flex;flex-direction:column;gap:12px}
[data-skin="dev"] #main .dev-ttext p{color:#5C5750}
[data-skin="dev"] #main .dev-trust-bottom{width:590px;display:flex;flex-direction:column;align-items:center;gap:40px}
[data-skin="dev"] #main .dev-trust-bottom p{color:#7B756D;text-align:center}
/* 7 cta */
[data-skin="dev"] #main .dev-cta{height:651px;padding:80px;display:flex;flex-direction:column;align-items:center}
[data-skin="dev"] #main .dev-cta-card{width:1280px;height:491px;background:#F4F3F0;border-radius:48px;padding:100px 80px;display:flex;justify-content:center;align-items:center}
[data-skin="dev"] #main .dev-cta-inner{width:720px;display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="dev"] #main .dev-cta-text{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
[data-skin="dev"] #main .dev-cta-text .dev-h2{max-width:460px}
[data-skin="dev"] #main .dev-cta-text p{width:548px;color:#555049}
/* 8 footer */
[data-skin="dev"] #main .dev-li{width:40px;height:40px;border-radius:50%;border:1px solid #555049;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px;color:#555049}
[data-skin="dev"] #main .dev-btn:focus-visible{outline:2px solid #F37F00;outline-offset:2px}

/* ---------- the official badge artwork is square (350x350, its own white margin): his 93x120 slot shrank it to ~66px;
     a 120 square fills his slot height, proportions untouched (iso-badge-rules s.1) ---------- */
[data-skin="dev"] #main .dev-tvis .dev-badge{width:120px;height:120px}

/* ---------- the live terminal title in his capitals (text stays the live "DD PublicAPI · EMx") ---------- */
[data-skin="dev"] #main .dev-term-title{text-transform:uppercase}

/* ---------- D3: reveals, the alt-home family ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes dev-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes dev-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    [data-skin="dev"] #main .dev-hero-card,[data-skin="dev"] #main .dev-cta-card{animation:dev-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="dev"] #main .dev-integ-left,[data-skin="dev"] #main .dev-term,[data-skin="dev"] #main .dev-cards,[data-skin="dev"] #main .dev-req-row,
    [data-skin="dev"] #main .dev-tcards,[data-skin="dev"] #main .dev-trust-bottom{animation:dev-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
  }
}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="dev"] #main .dev-sec{width:100%;max-width:1440px;height:auto}
  [data-skin="dev"] #main .dev-hero{padding-left:40px;padding-right:40px}
  [data-skin="dev"] #main .dev-hero-card,[data-skin="dev"] #main .dev-cta-card{width:100%}
  [data-skin="dev"] #main .dev-divider{width:auto;left:40px;right:40px}
  [data-skin="dev"] #main .dev-cards,[data-skin="dev"] #main .dev-tcards{flex-wrap:wrap;width:auto;padding-left:40px;padding-right:40px}
  [data-skin="dev"] #main .dev-card,[data-skin="dev"] #main .dev-tcard{width:auto;flex:1 1 260px;min-width:0;height:auto}
  [data-skin="dev"] #main .dev-integ,[data-skin="dev"] #main .dev-req-row{gap:48px;padding-left:40px;padding-right:40px}
  [data-skin="dev"] #main .dev-integ-left,[data-skin="dev"] #main .dev-req-text{width:auto;flex:1 1 0;min-width:0}
  [data-skin="dev"] #main .dev-req-photo{width:40%;height:auto;aspect-ratio:1/1}
  [data-skin="dev"] #main .dev-btn-row{flex-wrap:wrap}
}

/* ---------- chrome the skinned pages carry (sept-bbat.css lines 207-211, keyed on data-skin) ---------- */
html[data-skin="dev"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="dev"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important}
html[data-skin="dev"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="dev"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important}
html[data-skin="dev"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}