/* ============================================================
   BUSINESS . Payment approval workflows (teams.html) . 2026-10-21
   Ground truth: 21.10 notes otabek/Business - Configure payment approval workflows/Spec+Html/
                 digidoe-payment-approval-workflows.html + -spec.md; the PDF is 1440 x 4775 pt (1 pt = 1 px).
   Figma "DD-Website" frame "Business - Configure payment approval workflows" (1275:8611).

   Same recipe as sept-bbat/brol.css: <main> IS the designer's markup (classes bapw-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes (qa/oracle/skin_css.py):
     .x                 -> [data-skin="bapw"] #main .bapw-x
     hero photo         -> his CSS background, data: URI -> sept/teams/hero.webp (md5-matched)
     his 11 icons       -> inline <svg>, as he drew them
     body min-width     -> gone (D1): his numbers hold from 1300 up; the block at the end relaxes them below.
     nav + footer       -> his rules dropped (36 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css
   Scope is data-skin. data-followup="biz" is OFF this page (followup.css !important rules inside main); its two
   chrome blocks are repeated below, keyed on data-skin.

   Deviations from his HTML, each on record (Yuval 2026-10-21 "all ok"):
     hero       live hero chips dropped (03.10); the live FSCS line stays as a second caption line in his
                caption style (hero 684 -> 728), as on the six 20.10 pages.
     steps      the live "1. Prepare" ... "4. Execute" become his four numeral cards: the number is his 01..04
                device, the title keeps the live wording (Family Offices V7 ruling).
     breaks     his hard <br>s kept (designer_to_main.py keep_br), each with a space before it, so his lines are
                drawn exactly and textContent still reads as the live sentence.
     copy       live text wins: "Example.", "•" separators in the caption, "Explore user roles and permissions →".
     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="bapw"] body{background:#fff}
[data-skin="bapw"] 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="bapw"] #main *,[data-skin="bapw"] #main *::before,[data-skin="bapw"] #main *::after{box-sizing:border-box}
[data-skin="bapw"] #main *{margin:0;padding:0}
[data-skin="bapw"] #main ul{list-style:none}
[data-skin="bapw"] #main a{color:inherit;text-decoration:none}
[data-skin="bapw"] #main img,[data-skin="bapw"] #main svg{display:block}
[data-skin="bapw"] #main h1,[data-skin="bapw"] #main h2,[data-skin="bapw"] #main h3,[data-skin="bapw"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="bapw"] #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) ---------- */
[data-skin="bapw"] #main{--ink:#121212; --ink-nav:#2B2926; --ink-alt:#221A14;
    --body:#5C5750; --body-2:#555049; --muted:#7B756D; --number:#A8A299;
    --beige:#F4F3F0; --border:#D6D2C7; --divider:#CCC8BC;
    --orange:#F37F00; --orange-dark:#AC5900;}
[data-skin="bapw"] #main .bapw-band{width:100%;}
[data-skin="bapw"] #main .bapw-inner{width:1440px; margin:0 auto;}
/* Pill buttons */
[data-skin="bapw"] #main .bapw-pill{display:inline-flex; align-items:center; justify-content:center;
    height:47px; padding:14px 24px; border-radius:100px; border:none;
    font-family:inherit; font-size:16px; line-height:19px; font-weight:500;
    white-space:nowrap; text-align:center; cursor:pointer; flex:none;}
[data-skin="bapw"] #main .bapw-pill-dark{background:var(--ink); color:#FFFFFF; font-weight:700;}
[data-skin="bapw"] #main .bapw-pill-light{background:var(--beige); color:var(--body-2);}
[data-skin="bapw"] #main .bapw-pill-white{background:#FFFFFF; color:var(--body-2);}
/* 1. Navbar */
/* 2. Hero */
[data-skin="bapw"] #main .bapw-hero{padding:0 80px; display:flex; flex-direction:column; align-items:center; gap:20px; height:684px;}
[data-skin="bapw"] #main .bapw-hero-card{width:1280px; height:640px; flex:none; border-radius:48px; overflow:hidden;
    background:#3A332C url(sept/teams/hero.webp) center / cover no-repeat;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:80px; gap:40px;}
[data-skin="bapw"] #main .bapw-hero-text{display:flex; flex-direction:column; gap:20px; width:500px;}
[data-skin="bapw"] #main .bapw-hero-h1{font-size:52px; line-height:63px; font-weight:500; color:#FFFFFF; width:500px;}
[data-skin="bapw"] #main .bapw-hero-p{font-size:16px; line-height:24px; font-weight:400; color:#FFFFFF; opacity:0.8; width:480px;}
[data-skin="bapw"] #main .bapw-hero-buttons{display:flex; gap:20px; align-items:center;}
[data-skin="bapw"] #main .bapw-hero-buttons .bapw-primary{background:#FFFFFF; color:var(--ink); font-weight:700;}
[data-skin="bapw"] #main .bapw-hero-buttons .bapw-ghost{background:rgba(18,18,18,0.16); color:#FFFFFF;}
[data-skin="bapw"] #main .bapw-hero-tagline{font-size:16px; line-height:24px; color:var(--muted); white-space:nowrap; text-align:center;}
/* 3. Steps */
[data-skin="bapw"] #main .bapw-steps{padding:120px 80px 160px; display:flex; flex-direction:column; align-items:center; gap:80px;}
[data-skin="bapw"] #main .bapw-h2{font-size:44px; line-height:53px; font-weight:500; color:var(--ink);}
[data-skin="bapw"] #main .bapw-center{text-align:center;}
[data-skin="bapw"] #main .bapw-steps .bapw-h2{width:600px;}
[data-skin="bapw"] #main .bapw-step-row{width:1200px; display:flex; gap:30px; align-items:stretch;}
[data-skin="bapw"] #main .bapw-step-card{position:relative; width:277.5px; height:262px; flex:none;
    border:1px solid var(--border); border-radius:24px; padding:30px; overflow:hidden;
    display:flex; flex-direction:column; gap:30px;}
[data-skin="bapw"] #main .bapw-icon40,[data-skin="bapw"] #main .bapw-icon40 svg{width:40px; height:40px; flex:none;}
[data-skin="bapw"] #main .bapw-icon50,[data-skin="bapw"] #main .bapw-icon50 svg{width:50px; height:50px; flex:none;}
[data-skin="bapw"] #main .bapw-text-group{display:flex; flex-direction:column; gap:12px;}
[data-skin="bapw"] #main .bapw-step-num{position:absolute; top:30px; right:30px; font-size:24px; line-height:29px; font-weight:500; color:var(--number); text-align:right;}
[data-skin="bapw"] #main .bapw-step-title{font-size:20px; line-height:24px; font-weight:500; color:var(--ink);}
[data-skin="bapw"] #main .bapw-step-body{font-size:16px; line-height:24px; color:var(--body); width:217.5px; white-space:nowrap;}
/* 4. Configure approvals */
[data-skin="bapw"] #main .bapw-cfg-band{background:var(--beige);}
[data-skin="bapw"] #main .bapw-cfg{padding:160px 80px; display:flex; flex-direction:column; align-items:center; gap:80px;}
[data-skin="bapw"] #main .bapw-cfg .bapw-h2{width:682px;}
[data-skin="bapw"] #main .bapw-cfg-grid{width:1040px; display:flex; flex-direction:column; gap:40px;}
[data-skin="bapw"] #main .bapw-cfg-row{display:flex; gap:40px;}
[data-skin="bapw"] #main .bapw-cfg-card{width:500px; height:259px; flex:none; background:#FFFFFF; border-radius:24px; padding:40px;
    box-shadow:0 12px 28px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:40px; overflow:hidden;}
[data-skin="bapw"] #main .bapw-card-title{font-size:24px; line-height:29px; font-weight:500; color:var(--ink);}
[data-skin="bapw"] #main .bapw-card-body{font-size:16px; line-height:24px; color:var(--body); width:420px; white-space:nowrap;}
[data-skin="bapw"] #main .bapw-example{display:flex; align-items:center; gap:40px; padding:30px 40px;
    border:1px solid var(--border); border-radius:24px; width:766px; height:104px;}
[data-skin="bapw"] #main .bapw-example-label{font-size:18px; line-height:27px; font-weight:500; color:var(--body-2); white-space:nowrap; flex:none;}
[data-skin="bapw"] #main .bapw-example-text{font-size:14px; line-height:21px; color:var(--muted); width:570px; flex:none; white-space:nowrap;}
/* 5. Feature strip */
[data-skin="bapw"] #main .bapw-feat{padding:160px 160px 80px; display:flex; justify-content:center; align-items:flex-start; gap:120px; height:695px;}
[data-skin="bapw"] #main .bapw-feat-left{width:480px; flex:none; display:flex; flex-direction:column; gap:60px; align-items:flex-start;}
[data-skin="bapw"] #main .bapw-feat-left .bapw-text{display:flex; flex-direction:column; gap:20px;}
[data-skin="bapw"] #main .bapw-feat-left .bapw-h2{width:480px;}
[data-skin="bapw"] #main .bapw-feat-left p{font-size:16px; line-height:24px; color:var(--body); width:480px; white-space:nowrap;}
[data-skin="bapw"] #main .bapw-feat-right{width:520px; flex:none; display:flex; flex-direction:column; gap:30px;}
[data-skin="bapw"] #main .bapw-feat-card{border:1px solid var(--border); border-radius:24px; padding:40px 50px; overflow:hidden;
    display:flex; flex-direction:row; align-items:flex-start; gap:40px;}
[data-skin="bapw"] #main .bapw-feat-card .bapw-text-group{width:330px; flex:none;}
[data-skin="bapw"] #main .bapw-feat-body{font-size:16px; line-height:21.6px; color:var(--body-2); white-space:nowrap;}
/* 6. CTA */
[data-skin="bapw"] #main .bapw-cta{padding:80px; display:flex; flex-direction:column; align-items:center;}
[data-skin="bapw"] #main .bapw-cta-card{width:1280px; height:491px; background:var(--beige); border-radius:48px; padding:100px 80px; overflow:hidden;
    display:flex; justify-content:center; align-items:center;}
[data-skin="bapw"] #main .bapw-cta-content{width:720px; display:flex; flex-direction:column; align-items:center; gap:60px;}
[data-skin="bapw"] #main .bapw-cta-text{display:flex; flex-direction:column; align-items:center; gap:30px;}
[data-skin="bapw"] #main .bapw-cta .bapw-h2{width:720px;}
[data-skin="bapw"] #main .bapw-cta-p{font-size:16px; line-height:24px; color:var(--body-2); width:652px; text-align:center; white-space:nowrap;}
[data-skin="bapw"] #main .bapw-cta-buttons{display:flex; gap:20px;}
/* 7. Footer */

/* ---------- 2026-10-26 designer note: the second (FSCS) caption line is off the hero; the box is his fixed 684 again ---------- */



/* ---------- D3: reveals, the alt-home family ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes bapw-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes bapw-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    [data-skin="bapw"] #main .bapw-hero-card,[data-skin="bapw"] #main .bapw-cta-card{animation:bapw-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="bapw"] #main .bapw-step-row,[data-skin="bapw"] #main .bapw-cfg-grid,[data-skin="bapw"] #main .bapw-example,
    [data-skin="bapw"] #main .bapw-feat-left,[data-skin="bapw"] #main .bapw-feat-right{animation:bapw-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="bapw"] #main .bapw-inner{width:100%;max-width:1440px}
  [data-skin="bapw"] #main .bapw-hero{padding:0 40px}
  [data-skin="bapw"] #main .bapw-hero-card{width:100%;padding:60px}
  [data-skin="bapw"] #main .bapw-hero-tagline{white-space:normal}
  [data-skin="bapw"] #main .bapw-steps,[data-skin="bapw"] #main .bapw-cfg,[data-skin="bapw"] #main .bapw-feat,[data-skin="bapw"] #main .bapw-cta{height:auto;padding-left:40px;padding-right:40px}
  [data-skin="bapw"] #main .bapw-step-row,[data-skin="bapw"] #main .bapw-cfg-grid,[data-skin="bapw"] #main .bapw-cfg-row,[data-skin="bapw"] #main .bapw-example,
  [data-skin="bapw"] #main .bapw-cta-card{width:100%;max-width:1280px;height:auto}
  [data-skin="bapw"] #main .bapw-step-row,[data-skin="bapw"] #main .bapw-cfg-row{flex-wrap:wrap}
  [data-skin="bapw"] #main .bapw-step-card,[data-skin="bapw"] #main .bapw-cfg-card,[data-skin="bapw"] #main .bapw-feat-card{width:auto;flex:1 1 260px;min-width:0;height:auto}
  [data-skin="bapw"] #main .bapw-step-body br,[data-skin="bapw"] #main .bapw-card-body br,[data-skin="bapw"] #main .bapw-feat-body br,
  [data-skin="bapw"] #main .bapw-example-text br,[data-skin="bapw"] #main .bapw-cta-p br,[data-skin="bapw"] #main .bapw-hero-p br{display:none}
  [data-skin="bapw"] #main .bapw-feat{gap:48px}
  [data-skin="bapw"] #main .bapw-feat-left,[data-skin="bapw"] #main .bapw-feat-right{width:auto;flex:1 1 0;min-width:0}
  [data-skin="bapw"] #main .bapw-example{flex-wrap:wrap}
  [data-skin="bapw"] #main .bapw-cta-buttons{flex-wrap:wrap;justify-content:center}
}

/* ---------- chrome that followup.css carried for this page (sept-bbat.css lines 207-211, keyed on data-skin) ---------- */
html[data-skin="bapw"]: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="bapw"]: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="bapw"]: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="bapw"]: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="bapw"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}