/* ============================================================
   PARTNER . REFERRAL / INTRODUCER (partner-introducers.html) . 2026-10-03
   Ground truth: otabek weekend notes/Partners - Referral Introducer/Spec & html/
                 digidoe-referral-introducer.html + digidoe-referral-introducer-page-spec.md
   Figma "DD-Website" frame "Partners - Referral-Introducer" (964:16895), 1440 x 4608.
   Desktop only (Yuval, 2026-10-03: "drop the mobile").

   Same recipe as sept-pdo / sept-pemd / sept-pemi: <main> IS the designer's markup (classes
   pint-*, qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes:
     .x               -> [data-skin="pint"] #main .pint-x
     his two <main class="page"> halves (split around the full-bleed accounts band) -> one main;
                         the 1440 constraint moves from .page onto each section (max-width)
     hero photo       -> his CSS background, data: URI -> sept/partner-introducers/hero.webp; his rotated
                         radial vignette (::before + 2000px box-shadow) kept verbatim
     object-fit:fill  -> cover on the two split photos (identical at 1440)
     his static stepper -> the live .pj block (5 cards, partner-journey.js) in his geometry, spec 4.2 / 4.3
   Scope is data-skin (dd-shell.css keys 21 rules on [data-sept]).
   Chrome untouched: nav = dd-nav.css, footer = sept-footer.css.

   Deviations from his HTML, each on record:
     hero      live hero chips dropped (Yuval 2026-10-03 "use the designer's version"); his legal line under the
               card is the live one.
     cards     "Explore business accounts" / "Explore personal accounts" inside the two account-card bodies stay
               the live links, in his link colour; he drew the sentences as plain text.
     stepper   interactive, five cards, step 1 open; he drew step 2 as the sample state.
     nav       "Contact sales" stays hidden on partner pages (O3), his HTML shows it.
   ============================================================ */

html[data-skin="pint"] body{background:#fff}

/* ---------- resets his page relied on, scoped to main ---------- */
[data-skin="pint"] 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;
}
[data-skin="pint"] #main *{box-sizing:border-box;margin:0;padding:0}
[data-skin="pint"] #main section{width:100%;padding:0;background:#fff;position:relative}
[data-skin="pint"] #main h1,[data-skin="pint"] #main h2,[data-skin="pint"] #main h3{
  margin:0;font-weight:inherit;letter-spacing:normal!important;line-height:normal;text-wrap:auto;font-family:inherit;
}
[data-skin="pint"] #main p{margin:0;font-weight:inherit;letter-spacing:normal!important;line-height:inherit;text-wrap:auto;font-family:inherit}
[data-skin="pint"] #main a{color:inherit;text-decoration:none}
[data-skin="pint"] #main img,[data-skin="pint"] #main svg{display:block;max-width:none}
[data-skin="pint"] #main section::before,[data-skin="pint"] #main section::after{content:none!important;display:none!important}

[data-skin="pint"] #main .pint-page{width:100%;display:flex;flex-direction:column;align-items:center}
[data-skin="pint"] #main .pint-link{color:#B75F00}
[data-skin="pint"] #main .pint-link:hover{text-decoration:underline}

/* ---------- buttons, spec 0.4 ---------- */
[data-skin="pint"] #main .pint-btn{
  height:47px;padding:14px 24px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;line-height:19px;font-weight:500;white-space:nowrap;border:none;flex:none;cursor:pointer;
  box-shadow:none;transition:none;min-height:0;font-family:inherit;
}
[data-skin="pint"] #main .pint-btn-dark{background:#121212;color:#fff;font-weight:700}
[data-skin="pint"] #main .pint-btn-light{background:#fff;color:#121212;font-weight:700}
[data-skin="pint"] #main .pint-btn-sand{background:#F4F3F0;color:#555049;font-weight:500}
[data-skin="pint"] #main .pint-btn-ghost{background:rgba(18,18,18,.16);color:#fff;font-weight:500}
[data-skin="pint"] #main .pint-btn-row{display:flex;gap:20px;align-items:center}

/* ---------- 2. hero, spec 2 ---------- */
[data-skin="pint"] #main .pint-hero{width:100%;max-width:1440px;margin:0 auto;height:678px;padding:0 80px;display:flex;flex-direction:column;align-items:center;gap:20px}
[data-skin="pint"] #main .pint-hero-card{
  position:relative;flex:none;width:100%;max-width:1280px;height:640px;border-radius:48px;overflow:hidden;padding:80px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px;isolation:isolate;
  background:#2C2620 url("sept/partner-introducers/hero.webp") center/cover no-repeat;
}
/* his vignette: rotated ellipse centred (935,275), everything outside it #2C2620 via the shadow; the card clips it */
[data-skin="pint"] #main .pint-hero-card::before{
  content:"";position:absolute;z-index:0;width:3886px;height:1948px;left:935px;top:275px;
  transform:translate(-50%,-50%) rotate(16.4deg);
  background:radial-gradient(50% 50% at 50% 50%,rgba(44,38,32,0) 0%,rgba(44,38,32,0) 13%,rgba(44,38,32,1) 100%);
  box-shadow:0 0 0 2000px #2C2620;pointer-events:none;display:block;
}
[data-skin="pint"] #main .pint-hero-card>*{position:relative;z-index:1}
[data-skin="pint"] #main .pint-hero-text{width:500px;max-width:100%;display:flex;flex-direction:column;gap:20px}
[data-skin="pint"] #main .pint-hero h1{font-weight:500!important;font-size:52px!important;line-height:63px!important;color:#fff;text-align:left}
[data-skin="pint"] #main .pint-hero-text p{font-size:16px;line-height:24px;color:#fff;opacity:.8}
[data-skin="pint"] #main .pint-hero-legal{font-size:12px;line-height:18px;color:#5C5750;text-align:center;max-width:100%}
@media (min-width:1366px){[data-skin="pint"] #main .pint-hero-legal{white-space:nowrap}}

/* ---------- shared type ---------- */
[data-skin="pint"] #main .pint-h2{font-weight:500;font-size:44px;line-height:53px;color:#121212}
[data-skin="pint"] #main .pint-body{font-size:16px;line-height:24px;color:#5C5750}

/* ---------- 3 and 6. split sections (text + 480 photo), spec 3 / 6 ---------- */
[data-skin="pint"] #main .pint-split{width:100%;max-width:1440px;margin:0 auto;background:#fff;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:120px;padding-left:80px;padding-right:80px}
[data-skin="pint"] #main .pint-split-earn{height:640px;padding-top:140px;padding-bottom:20px}
[data-skin="pint"] #main .pint-split-cta{height:800px;padding-top:160px;padding-bottom:160px}
[data-skin="pint"] #main .pint-split-text{width:520px;max-width:100%;flex:none;display:flex;flex-direction:column;gap:60px}
[data-skin="pint"] #main .pint-copy{display:flex;flex-direction:column;gap:20px}
[data-skin="pint"] #main .pint-split-img{width:480px;height:480px;flex:none;border-radius:48px;object-fit:cover}

/* ---------- 4. journey, spec 4 ---------- */
[data-skin="pint"] #main .pint-journey{width:100%;max-width:1440px;margin:0 auto;height:883px;background:#fff;padding:140px 80px 160px;overflow:hidden;display:flex;flex-direction:column;align-items:center}
[data-skin="pint"] #main .pint-journey-inner{width:960px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="pint"] #main .pint-journey-head{width:720px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
[data-skin="pint"] #main .pint-journey-head .pint-h2{width:520px;max-width:100%}
[data-skin="pint"] #main .pint-journey-head .pint-body{width:500px;max-width:100%}
/* the live .pj block in his geometry (spec 4.2 / 4.3); restated because the scoped reset zeroes partner-journey.css */
[data-skin="pint"] #main .pj{width:100%;max-width:960px;margin:0;display:flex;flex-direction:column;gap:60px}
[data-skin="pint"] #main .pj-rail{position:relative;width:100%;display:grid;grid-template-columns:repeat(5,1fr)}
[data-skin="pint"] #main .pj-line,[data-skin="pint"] #main .pj-line-active{position:absolute;top:9.5px;left:10%;height:1px}
[data-skin="pint"] #main .pj-line{width:80%;background:#B5B2A8}
[data-skin="pint"] #main .pj-line-active{width:calc(80% / 4 * var(--pj-done));background:#F37F00}
[data-skin="pint"] #main .pj-step{
  display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;width:100%;
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:center;border-radius:0;box-shadow:none;min-height:0;
}
[data-skin="pint"] #main .pj-step:hover{background:none}
[data-skin="pint"] #main .pj-circle{width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid #B5B2A8;display:flex;align-items:center;justify-content:center;flex:none}
[data-skin="pint"] #main .pj-step.pj-done .pj-circle,[data-skin="pint"] #main .pj-step.pj-active .pj-circle{border-color:#F37F00}
[data-skin="pint"] #main .pj-step.pj-active .pj-circle::after{content:"";width:12px;height:12px;border-radius:50%;background:#F37F00}
[data-skin="pint"] #main .pj-lbl{display:flex;flex-direction:column;align-items:center;gap:3px}
[data-skin="pint"] #main .pj-lbl b{display:block;width:80px;font-size:16px;line-height:19px;font-weight:500;color:#5C5750}
[data-skin="pint"] #main .pj-step.pj-active .pj-lbl b{font-weight:600;color:#F37F00}
[data-skin="pint"] #main .pj-lbl span{display:block;width:100px;min-height:45px;font-size:12px;line-height:1.21;font-weight:400;color:#7B756D}
[data-skin="pint"] #main .pj-step:focus-visible{outline:none}
[data-skin="pint"] #main .pj-step:focus-visible .pj-circle{outline:2px solid #F37F00;outline-offset:3px}
/* his card: 960 x 172, 1px #D6D2C7 r24, 39px padding inside the border */
[data-skin="pint"] #main .pj-detail{width:100%;min-height:172px;padding:39px;display:flex;align-items:center;gap:40px;border:1px solid #D6D2C7;border-radius:24px;background:transparent;overflow:hidden}
[data-skin="pint"] #main .pj-detail[hidden]{display:none!important}
[data-skin="pint"] #main .pj-detail .pj-l{width:240px;padding-right:40px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
[data-skin="pint"] #main .pj-detail .pj-l b{font-size:28px;line-height:34px;font-weight:700;color:#F37F00}
[data-skin="pint"] #main .pj-detail .pj-l span{font-size:20px;line-height:24px;font-weight:400;color:#5C5750}
[data-skin="pint"] #main .pj-detail .pj-r{flex:1;min-width:0;font-size:16px;line-height:24px;font-weight:400;color:#5C5750}
[data-skin="pint"] #main .pj-detail .pj-r a{color:#B75F00}

/* ---------- 5. account offer, spec 5 (full-bleed #F4F3F0 band, 1440 content) ---------- */
[data-skin="pint"] #main .pint-accounts-bleed{width:100%;background:#F4F3F0}
[data-skin="pint"] #main .pint-accounts{width:100%;max-width:1440px;margin:0 auto;height:838px;background:#F4F3F0;padding:140px 80px;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="pint"] #main .pint-accounts .pint-h2{width:650px;max-width:100%;text-align:center}
[data-skin="pint"] #main .pint-cards{width:1040px;max-width:100%;display:flex;gap:80px;align-items:flex-start}
[data-skin="pint"] #main .pint-acard{width:480px;height:271px;flex:none;background:#fff;border:0;border-radius:24px;box-shadow:0 12px 28px rgba(0,0,0,.06);padding:30px;display:flex;flex-direction:column;gap:45px;overflow:hidden}
[data-skin="pint"] #main .pint-acard svg{width:50px;height:50px}
[data-skin="pint"] #main .pint-acard-txt{width:420px;max-width:100%;display:flex;flex-direction:column;gap:15px}
[data-skin="pint"] #main .pint-acard h3{font-weight:500;font-size:24px;line-height:29px;color:#121212}
[data-skin="pint"] #main .pint-accounts-note{width:800px;max-width:100%;font-size:14px;line-height:21px;color:#5C5750;text-align:center}