/* ============================================================
   BUSINESS . User Roles and Permissions (privacy-permissions.html) . 2026-10-20
   Ground truth: otabek 20.10/Business - User Roles and Permissions/Spec+Html/user-roles-permissions.html
                 + user-roles-permissions-page-spec.md; the PDF is 1440 x 7450 pt (1 pt = 1 px).
   Figma "DD-Website" frame "Business - User Roles and Permissions" (1194:25135).

   Same recipe as sept-corp/bcur/fam/bpay/bbat.css: <main> IS the designer's markup (classes brol-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes, transcribed by
   qa/oracle/skin_css.py:
     .x                 -> [data-skin="brol"] #main .brol-x
     hero photo         -> his CSS background, data: URI -> sept/privacy-permissions/hero.webp; his radial shade kept
     20 embedded images -> his named files under sept/privacy-permissions/ (md5-matched)
     body min-width     -> gone (D1): his numbers hold from 1300 up; the block at the end relaxes them below.
     nav + footer       -> his rules dropped (26 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css
   Scope is data-skin (dd-shell.css keys 21 rules on [data-sept]). data-followup="biz" is OFF this page
   (followup.css !important rules inside main); its two chrome blocks are repeated below, keyed on data-skin.
   The page's html class icp-biz stays (nothing in assets/ reads it, left as found).

   Deviations from his HTML, each on record (Yuval 2026-10-20 "all ok"):
     hero       the live FSCS line stays as a second caption line in his caption style (hero 684 -> 728); this
                live hero never had chips.
     steps      the live "1. Invite the user" ... "4. Assign access" become his four numeral cards: the number is
                his 01..04 device, the title keeps the live wording (Family Offices V7 ruling).
     copy       live text wins: "of your business accounts." (his frame: "Business Currency Accounts"), his
                extra "Ensuring complete control ..." sentence out, "•" separators in the caption.
     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="brol"] body{background:#fff}
[data-skin="brol"] 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="brol"] #main *,[data-skin="brol"] #main *::before,[data-skin="brol"] #main *::after{box-sizing:border-box}
[data-skin="brol"] #main *{margin:0;padding:0}
[data-skin="brol"] #main ul{list-style:none}
[data-skin="brol"] #main a{color:inherit;text-decoration:none}
[data-skin="brol"] #main img,[data-skin="brol"] #main svg{display:block}
[data-skin="brol"] #main h1,[data-skin="brol"] #main h2,[data-skin="brol"] #main h3,[data-skin="brol"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="brol"] #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="brol"] #main .brol-band{width:100%;position:relative}
[data-skin="brol"] #main .brol-inner{margin:0 auto}
/* type */
[data-skin="brol"] #main .brol-h2{font-weight:500;font-size:44px;line-height:53px;color:#121212}
[data-skin="brol"] #main .brol-t24{font-weight:500;font-size:24px;line-height:29px;color:#121212}
[data-skin="brol"] #main .brol-b16{font-weight:400;font-size:16px;line-height:24px}
[data-skin="brol"] #main .brol-center{text-align:center;margin-left:auto;margin-right:auto}
/* buttons */
[data-skin="brol"] #main .brol-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border-radius:100px;font-size:16px;line-height:19px;white-space:nowrap;border:none;cursor:pointer;font-family:inherit}
[data-skin="brol"] #main .brol-btn-dark{background:#121212;color:#FFFFFF;font-weight:700}
[data-skin="brol"] #main .brol-btn-white{background:#FFFFFF;color:#121212;font-weight:700}
[data-skin="brol"] #main .brol-btn-sand{background:#F4F3F0;color:#555049;font-weight:500}
[data-skin="brol"] #main .brol-btn-white2{background:#FFFFFF;color:#555049;font-weight:500}
[data-skin="brol"] #main .brol-btn-glass{background:rgba(18,18,18,0.16);color:#FFFFFF;font-weight:500}
/* cards */
[data-skin="brol"] #main .brol-card{border:1px solid #D6D2C7;border-radius:24px;background:#FFFFFF;padding:30px}
[data-skin="brol"] #main .brol-stack30{display:flex;flex-direction:column;gap:30px}
[data-skin="brol"] #main .brol-stack12{display:flex;flex-direction:column;gap:12px}
[data-skin="brol"] #main .brol-ico40{width:40px;height:40px;flex:none}
[data-skin="brol"] #main .brol-ico50{width:50px;height:50px;flex:none}
/* divider */
[data-skin="brol"] #main .brol-divider{position:absolute;left:50%;bottom:0;width:1160px;margin-left:-580px;height:1px;background:#D6D2C7}
/* 1 navbar */
/* 2 hero */
[data-skin="brol"] #main .brol-hero .brol-inner{width:1280px;height:684px;display:flex;flex-direction:column;align-items:center;gap:20px}
[data-skin="brol"] #main .brol-hero-card{position:relative;width:1280px;height:640px;border-radius:48px;overflow:hidden;
  background:
    radial-gradient(990px 1980px at 73.8% 46.5%, rgba(44,38,32,0) 0%, rgba(44,38,32,0) 13%, rgba(44,38,32,1) 100%),
    url(sept/privacy-permissions/hero.webp) center/cover no-repeat;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px;padding:80px}
[data-skin="brol"] #main .brol-hero-text{width:500px;display:flex;flex-direction:column;gap:20px}
[data-skin="brol"] #main .brol-hero h1{width:449px;font-weight:500;font-size:52px;line-height:63px;color:#FFFFFF}
[data-skin="brol"] #main .brol-hero-p{width:480px;color:#FFFFFF;opacity:.8}
[data-skin="brol"] #main .brol-btn-row{display:flex;gap:20px;align-items:center}
[data-skin="brol"] #main .brol-hero-caption{width:904px;color:#7B756D;text-align:center;white-space:nowrap}
/* 3 roles */
[data-skin="brol"] #main .brol-s-roles{height:782px}
[data-skin="brol"] #main .brol-s-roles .brol-inner{width:1280px;padding:120px 0 160px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="brol"] #main .brol-head750{width:750px;display:flex;flex-direction:column;align-items:center}
[data-skin="brol"] #main .brol-row4{width:1200px;display:flex;gap:30px}
[data-skin="brol"] #main .brol-row4 .brol-card{width:277.5px;height:272px}
[data-skin="brol"] #main .brol-row4 .brol-txt{width:217.5px}
[data-skin="brol"] #main .brol-c-body{color:#5C5750}
/* 4 control */
[data-skin="brol"] #main .brol-s-control{height:1012px}
[data-skin="brol"] #main .brol-s-control .brol-inner{width:1280px;padding:140px 0 160px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="brol"] #main .brol-grid2{width:1040px;display:grid;grid-template-columns:500px 500px;column-gap:40px;row-gap:40px}
[data-skin="brol"] #main .brol-gcard{height:243px;background:linear-gradient(112deg,#FFFFFF 0%,#F4F3F0 100%)}
[data-skin="brol"] #main .brol-gcard .brol-txt{width:440px}
[data-skin="brol"] #main .brol-gcard .brol-c-body{color:#555049}
/* 5 onboarding */
[data-skin="brol"] #main .brol-s-onboard{height:789px}
[data-skin="brol"] #main .brol-s-onboard .brol-inner{width:1280px;padding:140px 0 160px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="brol"] #main .brol-step{position:relative;width:277.5px}
[data-skin="brol"] #main .brol-row4 .brol-step{height:303px}
[data-skin="brol"] #main .brol-step .brol-num{position:absolute;top:30px;right:30px;font-weight:500;font-size:24px;line-height:29px;color:#A8A299;text-align:right}
[data-skin="brol"] #main .brol-step .brol-b135{font-weight:400;font-size:16px;line-height:21.6px;color:#5C5750}
/* 6 keep access */
[data-skin="brol"] #main .brol-s-keep{height:790px;background:#F4F3F0}
[data-skin="brol"] #main .brol-s-keep .brol-inner{width:1120px;padding:160px 0;display:flex;gap:120px;align-items:flex-start}
[data-skin="brol"] #main .brol-keep-left{width:480px;display:flex;flex-direction:column;gap:30px}
[data-skin="brol"] #main .brol-keep-left .brol-b16{color:#555049}
[data-skin="brol"] #main .brol-keep-right{width:520px;display:flex;flex-direction:column;gap:30px}
[data-skin="brol"] #main .brol-wcard{background:#FFFFFF;border-radius:24px;box-shadow:0 12px 28px rgba(0,0,0,0.06);padding:40px 50px;display:flex;gap:40px;align-items:flex-start}
[data-skin="brol"] #main .brol-wcard .brol-txt{width:330px;display:flex;flex-direction:column;gap:15px}
/* 7 permissions */
[data-skin="brol"] #main .brol-s-perm{height:978px}
[data-skin="brol"] #main .brol-s-perm .brol-inner{width:1280px;padding:160px 0;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="brol"] #main .brol-row2{width:1040px;display:flex;gap:80px}
[data-skin="brol"] #main .brol-row2 .brol-card{width:480px;height:243px}
[data-skin="brol"] #main .brol-row2 .brol-txt{width:420px}
/* 8 fca */
[data-skin="brol"] #main .brol-s-fca{height:995px}
[data-skin="brol"] #main .brol-s-fca .brol-inner{width:1120px;padding:140px 0 80px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="brol"] #main .brol-row3{width:1120px;display:flex;gap:30px}
[data-skin="brol"] #main .brol-fcard{width:353.333px;height:380px;padding:40px}
[data-skin="brol"] #main .brol-media{height:120px;display:flex;align-items:center;gap:20px}
[data-skin="brol"] #main .brol-circle{width:100px;height:100px;border-radius:100px;background:#F6F6F6;display:flex;align-items:center;justify-content:center}
[data-skin="brol"] #main .brol-fcard .brol-txt{width:273.333px}
[data-skin="brol"] #main .brol-t20{font-weight:500;font-size:20px;line-height:27px;color:#121212}
[data-skin="brol"] #main .brol-b14{font-weight:400;font-size:14px;line-height:21px;color:#5C5750}
[data-skin="brol"] #main .brol-lnk{color:#B75F00}
[data-skin="brol"] #main .brol-note{width:590px;display:flex;flex-direction:column;align-items:center;gap:40px}
[data-skin="brol"] #main .brol-note p{color:#7B756D;text-align:center}
/* 9 cta */
[data-skin="brol"] #main .brol-s-cta{height:651px}
[data-skin="brol"] #main .brol-s-cta .brol-inner{width:1280px;padding:80px 0}
[data-skin="brol"] #main .brol-cta-card{width:1280px;height:491px;background:#F4F3F0;border-radius:48px;padding:100px 80px;display:flex;align-items:center;justify-content:center}
[data-skin="brol"] #main .brol-cta-block{width:720px;display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="brol"] #main .brol-cta-text{display:flex;flex-direction:column;align-items:center;gap:30px}
/* 10 footer */
[data-skin="brol"] #main .brol-f12{font-weight:400;font-size:12px;line-height:18px;color:#555049}
[data-skin="brol"] #main .brol-f14{font-weight:400;font-size:14px;line-height:21px;color:#555049}
[data-skin="brol"] #main .brol-flink{font-weight:500;color:#AC5900}
[data-skin="brol"] #main .brol-btn:focus-visible{outline:2px solid #F37F00;outline-offset:2px}

/* ---------- 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 (alt-home.css already rises every main section h2) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes brol-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes brol-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    @keyframes brol-slide-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
    @keyframes brol-slide-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    [data-skin="brol"] #main .brol-hero-card{animation:brol-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="brol"] #main .brol-row4,[data-skin="brol"] #main .brol-grid2,[data-skin="brol"] #main .brol-row2,
    [data-skin="brol"] #main .brol-row3,[data-skin="brol"] #main .brol-cta-card{animation:brol-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
    [data-skin="brol"] #main .brol-keep-left{animation:brol-slide-l both;animation-timeline:view();animation-range:entry 0% entry 50%}
    [data-skin="brol"] #main .brol-keep-right{animation:brol-slide-r both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="brol"] #main .brol-inner{width:auto!important;max-width:1280px;padding-left:40px!important;padding-right:40px!important}
  [data-skin="brol"] #main .brol-divider{left:60px;right:60px;width:auto;margin-left:0}
  [data-skin="brol"] #main .brol-s-roles,[data-skin="brol"] #main .brol-s-control,[data-skin="brol"] #main .brol-s-onboard,
  [data-skin="brol"] #main .brol-s-keep,[data-skin="brol"] #main .brol-s-perm,[data-skin="brol"] #main .brol-s-fca,[data-skin="brol"] #main .brol-s-cta{height:auto}
  [data-skin="brol"] #main .brol-hero-card{width:100%;height:auto;min-height:560px;padding:60px}
  [data-skin="brol"] #main .brol-hero-text,[data-skin="brol"] #main .brol-hero h1,[data-skin="brol"] #main .brol-hero-p{width:auto;max-width:500px}
  [data-skin="brol"] #main .brol-btn-row{flex-wrap:wrap}
  [data-skin="brol"] #main .brol-hero-caption{width:auto;max-width:100%;white-space:normal}
  [data-skin="brol"] #main .brol-head750,[data-skin="brol"] #main .brol-head750 h2,[data-skin="brol"] #main .brol-head750 p,
  [data-skin="brol"] #main .brol-h2.brol-center{width:auto!important;max-width:750px}
  [data-skin="brol"] #main .brol-row4,[data-skin="brol"] #main .brol-row2,[data-skin="brol"] #main .brol-row3{width:100%;max-width:1200px;flex-wrap:wrap}
  [data-skin="brol"] #main .brol-row4 .brol-card,[data-skin="brol"] #main .brol-row2 .brol-card,[data-skin="brol"] #main .brol-fcard,
  [data-skin="brol"] #main .brol-step{width:auto;flex:1 1 240px;min-width:0;height:auto!important}
  [data-skin="brol"] #main .brol-fcard{min-height:380px}
  [data-skin="brol"] #main .brol-row4 .brol-txt,[data-skin="brol"] #main .brol-row2 .brol-txt,[data-skin="brol"] #main .brol-fcard .brol-txt,
  [data-skin="brol"] #main .brol-gcard .brol-txt,[data-skin="brol"] #main .brol-wcard .brol-txt{width:auto;min-width:0}
  [data-skin="brol"] #main .brol-grid2{width:100%;max-width:1040px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  [data-skin="brol"] #main .brol-gcard{height:auto;min-height:243px}
  [data-skin="brol"] #main .brol-s-keep .brol-inner{gap:60px;padding-top:100px!important;padding-bottom:100px!important}
  [data-skin="brol"] #main .brol-keep-left,[data-skin="brol"] #main .brol-keep-right{width:auto;flex:1 1 0;min-width:0}
  [data-skin="brol"] #main .brol-keep-right{max-width:520px}
  [data-skin="brol"] #main .brol-wcard{padding:30px}
  [data-skin="brol"] #main .brol-note{width:auto;max-width:590px}
  [data-skin="brol"] #main .brol-cta-card{width:100%;height:auto;min-height:400px;padding:60px}
  [data-skin="brol"] #main .brol-cta-block,[data-skin="brol"] #main .brol-cta-text h2,[data-skin="brol"] #main .brol-cta-text p{width:auto!important;max-width:720px}
  [data-skin="brol"] #main .brol-cta-text .brol-btn-row{justify-content:center}
}

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